Apa itu tata letak responsif?
Tata letak responsif berarti halaman yang sama memiliki tata letak berbeda pada ukuran layar berbeda. Saat ini, ketika Internet seluler sangat berkembang, halaman web yang kami kembangkan di browser desktop tidak lagi dapat memenuhi kebutuhan tampilan di perangkat seluler. Metode pengembangan tradisional adalah mengembangkan satu kumpulan halaman di sisi PC dan kumpulan halaman lainnya di sisi seluler. Tapi ini sangat merepotkan. Dengan semakin banyaknya terminal yang berbeda, Anda perlu mengembangkan beberapa versi halaman yang berbeda. Untuk menggunakan tata letak responsif, Anda hanya perlu mengembangkan satu set. EthanMarcotte mengusulkan konsep tata letak responsif pada Mei 2010. Singkatnya, sebuah situs web dapat kompatibel dengan banyak terminal.
Perbedaan antara pengembangan responsif dan pengembangan terpisah untuk seluler dan PC: Pengembangan responsif hanya menulis sekumpulan antarmuka, dan menampilkan tata letak dan konten yang berbeda dengan mendeteksi resolusi viewport dan melakukan pemrosesan kode pada klien untuk klien yang berbeda. Terminal seluler dan terminal PC dikembangkan secara terpisah. Dengan mendeteksi resolusi viewport, terminal ini dapat menentukan apakah perangkat yang diakses saat ini adalah PC, tablet, atau ponsel, sehingga meminta server dan mengembalikan halaman berbeda.
Apa prinsip pembangunan responsif?
Prinsip pengembangan responsif adalah menggunakan Media Query di CSS3 untuk mengatur tata letak dan gaya berbeda untuk perangkat dengan lebar berbeda agar dapat beradaptasi dengan perangkat berbeda.
Definisi dan penggunaan kueri SS3 @media:
Dengan menggunakan kueri @media, Anda dapat menentukan gaya berbeda untuk tipe media berbeda. @media dapat mengatur gaya berbeda untuk ukuran layar berbeda, terutama jika Anda perlu menyiapkan halaman responsif, @media sangat berguna. Saat Anda mengatur ulang ukuran browser, halaman juga akan dirender ulang berdasarkan lebar dan tinggi browser.
Misalnya, jika lebar layar kurang dari 500 piksel, ubah warna latar menjadi merah.
Untuk mengimplementasikan tata letak responsif, metode yang umum digunakan antara lain sebagai berikut:
(1) Gunakan media queries dalam CSS (yang paling sederhana);
(2) Gunakan JavaScript (biaya penggunaannya relatif tinggi);
(3) Gunakan kerangka kerja sumber terbuka pihak ketiga (seperti bootstrap, yang dapat mendukung berbagai browser).
Tetapkan tag meta
Pertama, kita perlu menyetel tag meta untuk memberi tahu browser agar membuat lebar viewport (area halaman web yang terlihat) sama dengan lebar perangkat dan melarang pengguna memperbesar halaman, seperti ditunjukkan di bawah ini:
<metaname=viewportcontent=width=lebar perangkat,skala awal=1,skala maksimum=1,dapat diskalakan pengguna=tidak>
Saat mengatur viewport, Anda perlu memperhatikan. Viewport adalah ukuran area yang terlihat pada halaman web. Saat mengatur viewport, cukup atur lebarnya saja tinggi secara otomatis diperluas oleh konten halaman web. Maksud dari isi meta tag diatas adalah sebagai berikut:
● area pandang: Area pandang, yang mewakili area halaman web yang terlihat;
●width: Mengontrol ukuran area pandang. Anda dapat menentukan nilai tertentu, seperti 600, atau nilai khusus yang terdiri dari kata kunci.
●initial-scale: menunjukkan rasio penskalaan awal, yaitu rasio penskalaan saat halaman pertama kali dimuat;
●skala maksimum: Menunjukkan rasio maksimum yang diperbolehkan pengguna untuk memperbesar, mulai dari 0 hingga 10,0;
●skala minimum: Menunjukkan bahwa pengguna diperbolehkan memperbesar ke skala minimum, mulai dari 0 hingga 10,0;
●dapat diskalakan pengguna: Menunjukkan apakah pengguna dapat melakukan zoom secara manual, "ya" berarti penskalaan diperbolehkan, "tidak" berarti penskalaan dilarang.
pertanyaan media
Kueri media CSS dapat menentukan gaya CSS berbeda untuk jenis media berbeda (sablon) berdasarkan kondisi tertentu, sehingga pengguna yang menggunakan perangkat berbeda bisa mendapatkan pengalaman terbaik.
Gunakan HTML sebagai contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Tutorial pengantar halaman responsif: Albert Yang</title><linkrel =stylesheethref=style.css><linkre l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnNcrosso rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Beranda</a></li><li><ahref= #>Blog</a></li><li><ahref=#>Hubungi saya</a></li><li><ahref=#>Papan pesan</a></li><li> <ahref=#>Tentang saya</a> </li><li><ahref=#>Dinding foto</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i ></div></header><div><div><h2>Tata letak responsif</h2><p>Tata letak responsif berarti laman yang sama memiliki tata letak berbeda dalam ukuran layar berbeda. Metode pengembangan tradisional adalah mengembangkan satu set untuk PC dan set lainnya untuk ponsel. Namun, saat menggunakan tata letak responsif, Anda hanya perlu mengembangkan satu set. Perbedaan antara desain responsif dan desain adaptif: desain responsif mengembangkan serangkaian antarmuka, dan menampilkan tata letak dan konten yang berbeda dengan mendeteksi resolusi area pandang dan melakukan pemrosesan kode di sisi klien untuk klien yang berbeda; desain adaptif memerlukan pengembangan beberapa set antarmuka , dengan mendeteksi resolusi area pandang, ditentukan apakah perangkat yang sedang diakses adalah PC, tablet, atau ponsel, sehingga meminta lapisan layanan dan mengembalikan halaman berbeda. Kueri media CSS3 memungkinkan kita menentukan gaya berbeda untuk jenis media berbeda. Saat ukuran jendela browser disetel ulang, halaman juga akan dirender ulang berdasarkan lebar dan tinggi browser. </p><ahref=#>Baca teks selengkapnya</a></div><imgsrc=img.png></div></body></html>
Hasil berjalan:
Berikut ini adalah contoh komprehensif untuk mendemonstrasikan penerapan tata letak responsif:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Tata letak responsif</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, pengguna -scalable=tidak/><gaya>*{margin:0px;padding:0px;font-f amily:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/background-color:goldenrod;text-align:center;font-size:48px ; tinggi garis:100px;margin:0auto;}#headdiv{display:none;ukuran font:20px;h delapan:30px;lebar:100px;warna latar:hijau;float:kanan;tinggi garis:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float: kiri; perataan teks: tengah; gaya daftar: tidak ada; ukuran font: 20 piksel;}#main{he ight:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px;float:left;width:20%;background-color:red}.center{ lebar:60%;batas kiri:10pxsolid#FFF;batas kanan:10pxso tutup#FFF;ukuran kotak:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){. kanan{display:none;}.kiri{width:30%;}.center{width:70%;border- kanan: tersembunyi;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{border: tersembunyi;border-top:10pxsolid#FFFFFF;border-bottom:10pxso tutup#FFFFFF;height:600px;line-height:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>tajuk1</li><li>tajuk2</li><li>tajuk2</li><li>tajuk2</li>< li>header2</li></ul><div>ikon</div></header><sectionid=main><divclass=left>kiri</div><divclass=center>tengah</div><divclass =kanan>kanan</div></section><footerid=foot>footer</footer></div></body></html>Hasil berjalan:
