Begini nih cara membuat Halaman Responsive Hanya Menggunakan CSS
Assalamu'alikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Oke Pada hari ini merupakan hari yang bisa dibilang sangat Senang :v, Kenapa? karena Project Aplikasi yang saya buat telah selesai wkwkw, Nah Pada kali ini saya akan Membuat salah satu fitur Responsive Langsung saja dibaca dan dipahami kalau bisa dipraktikkan :)
Latar Belakang
Banyaknya Halaman Website atau aplikasi-aplikasi berbasis web yang tidak memiliki fitur responsive, sehingga jika dibuka dilayar yang resolusinya lebih kecil maka tata letak dari halaman tersebut tidak teratur atau acak acakan
Maksud Dan Tujuan
Agar ketika halaman diakses melalui layar yang lebih kecil dapat terlihat teratur dan tidak acak acakan, sehingga user yang mengakses lebih nyaman untuk berselancar di web atau aplikasinya
Jangka waktu yang dibutuhkan
2 Jam
Langkah Kerja
Untuk Membuat halaman responsive Ada 3 hal yang harus di butuhkan yaitu
1. Definisi Meta Tag Untuk Desain Responsive
Mobile Browser biasanya akan mengatur skala halaman html sesuai lebar viewport, yang akhirnya halaman tersebut dapat tampil dilayar mobile,Tag viewport sendiri digunakan untuk memberitahukan kepada browser untuk menggunakan lebar perangkat sebagai acuan lebar viewport serta menonaktifkan skala awal
2. Menentukan Struktur HTML
menentukan struktur HTML website biasanya terdiri dari header, content, sidebar dan footer
3. Membuat Media Query Di CSS
langkah terakhir yang akan membuat website Anda responsive, seolah bisa menggunakan kondisi (IF) layaknya bahasa pemograman seperti PHP dan JS.
Gimana Sudah Mengerti? Itulah Beberapa yang harus diperhatikan sebelum membuat halaman menjadi lebih responsive, Nah sekarang saya akan menerapkan terknik responsive ini pada aplikasi yang saya buat , agar ketika diakses melalui smartphone, Halaman tersebut dapat menyesuaikan Layar Smartphone, Langsung saja, hal pertama yang harus dilakukan adalah menambahkan meta tag, Nah untuk menambahkan meta tag ini buka file index dan tambahkan script seperti dibawah ini antara tag <head>..</head>
nah setelah itu kita harus membuat struktur html yang nantinya akan dibuat untuk responsive, pada kali ini saya kan membuat struktur html pada file index yang sudah saya buat pada aplikasi saya
Nah Setelah itu inilah hal yang paling terpenting, kita harus membuat query pada file css, hal yang harus dioerhatikan juga adalah kita harus tau ukuran ukuran resolusi layar antara tablet atau smartphone dan lainnya agar bisa menyesuaikan dalam pembuatan query, berikut query yang saya buat dalam file css file index saya :
Nah sampai disini pembuatan halaman responsive sudah selesai, sekarang kita coba :
Tampilan pada laptop
Tampilan pada tablet
tampilan pada smartphone
Nah Gimana? Mudah bukan
Untuk membuat halaman atau fitur responsive ini kalian harus paham tentang CSS3 dan kalian harus paham tentang query dalam pembuatan responsive
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Oke Pada hari ini merupakan hari yang bisa dibilang sangat Senang :v, Kenapa? karena Project Aplikasi yang saya buat telah selesai wkwkw, Nah Pada kali ini saya akan Membuat salah satu fitur Responsive Langsung saja dibaca dan dipahami kalau bisa dipraktikkan :)
Latar Belakang
Banyaknya Halaman Website atau aplikasi-aplikasi berbasis web yang tidak memiliki fitur responsive, sehingga jika dibuka dilayar yang resolusinya lebih kecil maka tata letak dari halaman tersebut tidak teratur atau acak acakan
Maksud Dan Tujuan
Agar ketika halaman diakses melalui layar yang lebih kecil dapat terlihat teratur dan tidak acak acakan, sehingga user yang mengakses lebih nyaman untuk berselancar di web atau aplikasinya
Jangka waktu yang dibutuhkan
2 Jam
Langkah Kerja
Untuk Membuat halaman responsive Ada 3 hal yang harus di butuhkan yaitu
1. Definisi Meta Tag Untuk Desain Responsive
Mobile Browser biasanya akan mengatur skala halaman html sesuai lebar viewport, yang akhirnya halaman tersebut dapat tampil dilayar mobile,Tag viewport sendiri digunakan untuk memberitahukan kepada browser untuk menggunakan lebar perangkat sebagai acuan lebar viewport serta menonaktifkan skala awal
2. Menentukan Struktur HTML
menentukan struktur HTML website biasanya terdiri dari header, content, sidebar dan footer
3. Membuat Media Query Di CSS
langkah terakhir yang akan membuat website Anda responsive, seolah bisa menggunakan kondisi (IF) layaknya bahasa pemograman seperti PHP dan JS.
Gimana Sudah Mengerti? Itulah Beberapa yang harus diperhatikan sebelum membuat halaman menjadi lebih responsive, Nah sekarang saya akan menerapkan terknik responsive ini pada aplikasi yang saya buat , agar ketika diakses melalui smartphone, Halaman tersebut dapat menyesuaikan Layar Smartphone, Langsung saja, hal pertama yang harus dilakukan adalah menambahkan meta tag, Nah untuk menambahkan meta tag ini buka file index dan tambahkan script seperti dibawah ini antara tag <head>..</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
nah setelah itu kita harus membuat struktur html yang nantinya akan dibuat untuk responsive, pada kali ini saya kan membuat struktur html pada file index yang sudah saya buat pada aplikasi saya
Nah Setelah itu inilah hal yang paling terpenting, kita harus membuat query pada file css, hal yang harus dioerhatikan juga adalah kita harus tau ukuran ukuran resolusi layar antara tablet atau smartphone dan lainnya agar bisa menyesuaikan dalam pembuatan query, berikut query yang saya buat dalam file css file index saya :
@media screen and (max-width: 1140px) {
.img1 {
width: 100px;
margin-left: 120px;
margin-top: 40px;
}
.btn1 {
margin-left: 30px;
}
.col-2 {
margin-left: 100px;
}
}
@media screen and (max-width: 945px) {
.img1 {
margin-left: 105px;
}
.btn1 {
margin-left: 15px;
}
.col-2 {
margin-left: 70px;
}
}
@media screen and (max-width: 915px) {
.btn1 {
margin-left: 50px;
}
.btn3 {
margin-left: 90px;
margin-top: 10px;
}
}
@media screen and (max-width: 755px) {
.img1 {
margin-left: 75px;
}
.btn1 {
margin-left: 30px;
}
.btn3 {
margin-left: 70px;
}
}
@media screen and (max-width: 717px) {
.box {
width: 600px;
}
.kotak1 {
margin-left: 5px;
width: 180px;
}
.kotak2 {
width: 175px;
}
}
@media screen and (max-width: 649px) {
.col-3 {
display: none;
}
.col-1 {
width: 50%;
}
.img1 {
margin-left: 120px;
}
.btn1 {
margin-left: 80px;
}
.btn3 {
margin-left: 120px;
}
.col-2 {
margin-left: 30px;
}
}
@media screen and (max-width: 605px) {
.box {
width: 400px;
height: auto;
overflow: hidden;
}
.kotak3 {
display: none;
}
.footer-h4 {
font-size: 10px;
}
}
@media screen and (max-width: 538px) {
.col-1 {
width: 100%;
}
.footer-atas {
height: 800px;
}
.img1 {
margin-left: 230px;
}
.btn1 {
margin-left: 135px;
}
.btn3 {
margin-left: 1px;
}
.col-2 {
margin-left: 130px;
width: 300px;
height: 200px;
}
.col-3 {
display: block;
width: 300px;
margin-top: -30px;
}
}
@media screen and (max-width: 438px) {
.img1 {
margin-left: 180px;
}
.btn1 {
margin-left: 90px;
}
.col-2 {
margin-left: 70px;
}
.col-3 {
margin-left: 70px;
}
.almt {
font-size: 15px;
}
.kot {
width: 250px;
}
.logo_sekolah {
margin-left: 100px;
}
}
@media screen and (max-width: 415px) {
.box {
width: 200px;
}
.kotak3 {
display: block;
}
.footer-atas {
margin-top: 300px;
}
.col-2-h4 {
width: 220px;
}
.col-3-h4 {
width: 220px;
}
.img1 {
margin-left: 150px;
}
.btn1 {
margin-left: 60px;
}
.wrapper {
height: auto;
}
body {
background: white;
}
}
@media screen and (max-width: 373px) {
.col-2, .col-3{
display: none;
}
.footer-atas {
height: 300px;
}
.footer {
height: 100px;
}
}
@media screen and (max-width: 333px) {
.img1 {
margin-left: 130px;
}
.btn1 {
margin-left: 40px;
}
}
@media screen and (max-width: 320px) {
.img1 {
margin-left: 120px;
}
.btn1 {
margin-left: 20px;
}
}
@media screen and (max-width: 276px) {
.img1 {
margin-left: 100px;
}
.btn1 {
margin-left: 50px;
}
.btn3 {
margin-left: 90px;
}
.button {
display: none;
}
.logo_sekolah {
margin-left: 90px;
}
}
@media screen and (max-width: 243px) {
.btn1 {
margin-left: 40px;
}
.btn3 {
margin-left: 80px;
}
.img1 {
margin-left: 80px;
}
}
.img1 {
width: 100px;
margin-left: 120px;
margin-top: 40px;
}
.btn1 {
margin-left: 30px;
}
.col-2 {
margin-left: 100px;
}
}
@media screen and (max-width: 945px) {
.img1 {
margin-left: 105px;
}
.btn1 {
margin-left: 15px;
}
.col-2 {
margin-left: 70px;
}
}
@media screen and (max-width: 915px) {
.btn1 {
margin-left: 50px;
}
.btn3 {
margin-left: 90px;
margin-top: 10px;
}
}
@media screen and (max-width: 755px) {
.img1 {
margin-left: 75px;
}
.btn1 {
margin-left: 30px;
}
.btn3 {
margin-left: 70px;
}
}
@media screen and (max-width: 717px) {
.box {
width: 600px;
}
.kotak1 {
margin-left: 5px;
width: 180px;
}
.kotak2 {
width: 175px;
}
}
@media screen and (max-width: 649px) {
.col-3 {
display: none;
}
.col-1 {
width: 50%;
}
.img1 {
margin-left: 120px;
}
.btn1 {
margin-left: 80px;
}
.btn3 {
margin-left: 120px;
}
.col-2 {
margin-left: 30px;
}
}
@media screen and (max-width: 605px) {
.box {
width: 400px;
height: auto;
overflow: hidden;
}
.kotak3 {
display: none;
}
.footer-h4 {
font-size: 10px;
}
}
@media screen and (max-width: 538px) {
.col-1 {
width: 100%;
}
.footer-atas {
height: 800px;
}
.img1 {
margin-left: 230px;
}
.btn1 {
margin-left: 135px;
}
.btn3 {
margin-left: 1px;
}
.col-2 {
margin-left: 130px;
width: 300px;
height: 200px;
}
.col-3 {
display: block;
width: 300px;
margin-top: -30px;
}
}
@media screen and (max-width: 438px) {
.img1 {
margin-left: 180px;
}
.btn1 {
margin-left: 90px;
}
.col-2 {
margin-left: 70px;
}
.col-3 {
margin-left: 70px;
}
.almt {
font-size: 15px;
}
.kot {
width: 250px;
}
.logo_sekolah {
margin-left: 100px;
}
}
@media screen and (max-width: 415px) {
.box {
width: 200px;
}
.kotak3 {
display: block;
}
.footer-atas {
margin-top: 300px;
}
.col-2-h4 {
width: 220px;
}
.col-3-h4 {
width: 220px;
}
.img1 {
margin-left: 150px;
}
.btn1 {
margin-left: 60px;
}
.wrapper {
height: auto;
}
body {
background: white;
}
}
@media screen and (max-width: 373px) {
.col-2, .col-3{
display: none;
}
.footer-atas {
height: 300px;
}
.footer {
height: 100px;
}
}
@media screen and (max-width: 333px) {
.img1 {
margin-left: 130px;
}
.btn1 {
margin-left: 40px;
}
}
@media screen and (max-width: 320px) {
.img1 {
margin-left: 120px;
}
.btn1 {
margin-left: 20px;
}
}
@media screen and (max-width: 276px) {
.img1 {
margin-left: 100px;
}
.btn1 {
margin-left: 50px;
}
.btn3 {
margin-left: 90px;
}
.button {
display: none;
}
.logo_sekolah {
margin-left: 90px;
}
}
@media screen and (max-width: 243px) {
.btn1 {
margin-left: 40px;
}
.btn3 {
margin-left: 80px;
}
.img1 {
margin-left: 80px;
}
}
Nah sampai disini pembuatan halaman responsive sudah selesai, sekarang kita coba :
Tampilan pada laptop
Tampilan pada tablet
tampilan pada smartphone
Nah Gimana? Mudah bukan
Untuk membuat halaman atau fitur responsive ini kalian harus paham tentang CSS3 dan kalian harus paham tentang query dalam pembuatan responsive
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
