Artikel ini memperkenalkan implementasi desain web responsif (adaptif) HTML5 dan membagikannya kepada semua orang, sebagai berikut:
Langkah 1: Tambahkan sebaris tag meta viewport ke kepala kode halaman web
<nama meta=konten viewport=lebar=lebar perangkat, skala awal=1 />
viewport adalah lebar dan tinggi default halaman web. Baris kode di atas berarti: lebar halaman web sama dengan lebar layar secara default (lebar=lebar perangkat), dan rasio penskalaan asli (skala awal). =1) adalah 1,0, yaitu ukuran awal halaman web menempati 100% area layar.
Semua browser utama mendukung pengaturan ini, termasuk IE9. Untuk browser lama (terutama IE6, 7, 8), Anda perlu menggunakan css3-mediaqueries.js
<!--[if lt IE 9]> <skrip src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
Langkah 2: (Catatan) Jangan gunakan lebar absolut, ukuran font
lebar:otomatis; / lebar:XX%;
Langkah Tiga: (Catatan) Ukuran Font
Ukuran fontnya 100% dari ukuran default halaman, yaitu 16 piksel
Jangan gunakan ukuran absolut PX untuk font, gunakan ukuran relatif REM
html{ukuran font:62,5%;} badan {font:normal 100% Arial,sans-serif;ukuran font:14px;Langkah 4: Tata Letak Aliran
Yang dimaksud dengan fluid layout adalah posisi setiap balok bersifat mengambang dan tidak tetap.
.kiri{ lebar:30%; mengambang:kiri} .kanan{ lebar:70%;Keuntungannya adalah jika lebarnya terlalu kecil untuk menampung dua elemen, elemen berikutnya akan otomatis bergulir ke bagian bawah elemen sebelumnya tanpa meluap ke arah horizontal, sehingga menghindari munculnya bilah gulir horizontal.
Langkah 5: Pilih untuk memuat CSS
Inti dari desain web adaptif adalah modul Media Query yang diperkenalkan oleh CSS3. Secara otomatis mendeteksi lebar layar dan kemudian memuat file CSS yang sesuai
<link rel=stylesheet type=teks/css media=layar dan (lebar perangkat maksimal: 600px) href=style/css/css600.css />
Kode di atas berarti jika lebar layar kurang dari 600 piksel (lebar perangkat maksimal: 600 piksel), muat file css600.css.
Jika lebar layar antara 600 piksel dan 980 piksel, muat file css600-980.css
<link rel=stylesheet type=teks/css media=layar dan (lebar minimum: 600 piksel) dan (lebar perangkat maksimal: 980 piksel) href=css600-980.css />
Juga (tidak disarankan): Selain memuat file CSS dengan tag html, Anda juga dapat memuatnya di file CSS yang sudah ada
@import url(css600.css) layar dan (max-device-width: 600px);
Langkah 6: Aturan CSS @media
@layar media dan (lebar perangkat maksimal: 400 piksel) { .left{ float:none;} }Ketika layar lebih kecil dari 400, kiri membatalkan mengambang
Langkah 7: Adaptasi gambar
Desain web responsif juga harus menerapkan penskalaan gambar otomatis.
img, objek {lebar maksimal: 100%;}Versi IE yang lebih lama tidak mendukung max-width, jadi saya harus menulis:
img {lebar: 100%;}Saat menskalakan gambar pada platform Windows, distorsi gambar mungkin terjadi. Saat ini, Anda dapat mencoba menggunakan perintah milik IE
img { lebar:100%; -ms-interpolasi-mode: bikubik;}Atau gunakan js--imgSizer.js
addLoadEvent(fungsi() { var imgs = document.getElementById(konten).getElementsByTagName(img); imgSizer.collate(imgs); });Catatan: Jika memungkinkan, yang terbaik adalah memuat gambar dengan resolusi berbeda sesuai dengan ukuran layar berbeda.
Operasi sederhana:
<tipe gaya=teks/css> img{ lebar maksimal:100%;} video{ lebar maksimal:100%; tinggi:otomatis;} header ul li{ float:kiri; gaya daftar:tidak ada; ketik: tidak ada; margin-kanan: 10px;} pilih tajuk{display: tidak ada;} @media (lebar maksimal:960px){ tajuk ul{ tampilan: tidak ada;} tajuk pilih{ display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>Beranda</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>Beranda</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.