Ringkasan pengembangan halaman responsif html5/css3

Adaptif adalah sekumpulan templat yang beradaptasi dengan semua terminal, tetapi tata letak yang terlihat pada setiap perangkat sama, yang biasa disebut adaptif lebar.

Seperangkat templat responsif beradaptasi dengan semua terminal, namun tata letak yang dilihat oleh setiap perangkat mungkin berbeda.

Meskipun desain web responsif/adaptif akan membawa kerugian seperti beban kerja yang berat, kompatibilitas dengan berbagai perangkat, kode yang rumit, dan waktu pemuatan yang lama, desain tersebut bersifat lintas platform dan terminal, dapat dirancang satu kali, dapat diterapkan secara universal, dan dapat diadaptasi sesuai dengan kebutuhan. resolusi layar dan memperbesar gambar secara otomatis serta menyesuaikan tata letak secara otomatis bukan hanya implementasi teknis, tetapi juga cara berpikir baru tentang desain.

Solusi untuk banyak situs web adalah menyediakan halaman web berbeda untuk perangkat berbeda, seperti menyediakan versi seluler khusus, atau versi iPhone/iPad. Meskipun hal ini memberikan efek yang baik, hal ini lebih merepotkan dan memerlukan pemeliharaan beberapa versi secara bersamaan. Terlebih lagi, jika sebuah situs web memiliki banyak portal, hal ini akan sangat meningkatkan kompleksitas desain arsitektur.

Adaptasi masih memunculkan masalah. Jika layar terlalu kecil, meskipun halaman web dapat disesuaikan dengan ukuran layar, konten akan terasa terlalu ramai jika dilihat di layar kecil masalah. Secara otomatis dapat mengenali lebar layar dan menyesuaikan desain web. Tata letak dan konten yang ditampilkan dapat berubah.

Pengalaman adaptif http://m.ctrip.com/html5/ Pengalaman responsif http://segmentfault.com/

Taman Rahasia CSS http://www.csszengarden.com/

http://caibaojian.com/demo/ued/

 <meta name=viewport content=width=device-width, skala awal=1.0, skala maksimum=1.0, skalabel pengguna=tidak>

Beberapa parameter kode ini dijelaskan:

§width = lebar perangkat: Lebarnya sama dengan lebar perangkat saat ini

§skala awal: penskalaan awal (pengaturan default adalah 1.0)

§skala minimum: Skala minimum yang boleh diperbesar oleh pengguna (standarnya adalah 1,0)

§skala maksimum: Skala maksimum yang boleh diperbesar oleh pengguna (default diatur ke 1.0)

§dapat diskalakan pengguna: apakah pengguna dapat memperbesar atau memperkecil secara manual (defaultnya adalah tidak, karena kami tidak ingin pengguna memperbesar dan memperkecil halaman)

2. Media query CSS3 media query merupakan faktor kunci dalam mewujudkan desain responsif. Anda dapat menggunakan fitur kueri media agar halaman menggunakan blok CSS yang berbeda berdasarkan lebar perangkat.

Aturan css berikut akan berlaku bila lebar layar kurang dari atau sama dengan 980:

 @media (orientasi: potret) dan (lebar maksimal: 460 piksel) { .video .innerBox .news a.more { tampilan: tidak ada; } .video .innerBox .news span { tampilan: tidak ada } .video .innerBox .news { lebar: 100%; } .video .innerBox .news ul { lebar: 100%; }}

orientasi: potret |

potret:

Menentukan bahwa tinggi area halaman yang terlihat pada perangkat keluaran yang ditentukan lebih besar dari atau sama dengan lebarnya

lanskap:

Kecuali nilai potretnya, semuanya lanskap

Pilih Muat CSS untuk memuat file smallScreen.css jika lebar layar antara 400 piksel dan 600 piksel.

 <link rel=stylesheet type=text/cssmedia=layar dan (lebar minimum: 400 piksel) dan (lebar perangkat maksimal: 600 piksel) href=smallScreen.css />

3. Tata letak persen

1. Proses desain halaman responsif html5/css3

Langkah 1: Tentukan jenis perangkat dan ukuran layar yang harus kompatibel: termasuk perangkat seluler (ponsel, tablet) dan PC. Untuk perangkat seluler, perhatikan penambahan fungsi isyarat saat merancang dan mengimplementasikannya.

Ukuran layar: mencakup berbagai ukuran layar ponsel (termasuk horizontal dan vertikal), berbagai ukuran tablet (termasuk horizontal dan vertikal), layar komputer biasa, dan layar lebar.

Langkah 2: Buat prototipe gambar rangka yang berbeda untuk ukuran yang ditentukan. Anda perlu mempertimbangkan bagaimana tata letak halaman berubah dalam ukuran yang berbeda, cara menskalakan ukuran konten, penghapusan fungsi dan konten, dan bahkan cara beroperasi di lingkungan khusus. Desain khusus, dll. Proses ini memerlukan komunikasi yang erat antara desainer dan pengembang front-end.

Langkah 3: Desain visual. Impor gambar ke perangkat yang sesuai untuk beberapa pengujian sederhana, yang dapat membantu kami menemukan masalah dalam aksesibilitas, keterbacaan, dll.

Dibandingkan dengan pengembangan web tradisional, halaman desain responsif mengalami perubahan dalam tata letak halaman dan ukuran konten, sehingga hasil akhir kemungkinan besar akan sangat berbeda dari rancangan desain, sehingga memerlukan lebih banyak komunikasi antara pengembang dan desainer front-end.

2. Font responsif

Perbandingan antara beberapa unit berbeda di CSS

piksel: Piksel. Satuan panjang relatif, besar kecilnya ditentukan oleh resolusi layar. (Bekerja sama dengan pertanyaan media)

em: satuan panjang relatif. Setara dengan ukuran font teks dalam objek saat ini, atau relatif terhadap ukuran font default browser jika ukuran font saat ini untuk teks sebaris tidak disetel. Nilai em tidak tetap, ia mewarisi ukuran font elemen induk. Semua browser yang tidak dimodifikasi mematuhi: 1em=16px. Kemudian 12px=0,75em,10px=0,625em. Untuk menyederhanakan konversi ukuran font, Anda perlu mendeklarasikan Font-size=62.5% di pemilih isi di CSS, yang membuat nilai em menjadi 16px*62.5%=10px, jadi 12px=1.2em, 10px=1em , juga Artinya, Anda hanya perlu membagi nilai px asli Anda dengan 10, lalu mengubahnya menjadi em sebagai satuannya.

rem: unit relatif baru di CSS3. Perbedaan utama dari em adalah ketika menggunakan rem untuk mengatur ukuran font suatu elemen, ukurannya masih relatif, tetapi hanya relatif terhadap elemen root HTML. Unit ini dapat dikatakan menggabungkan keunggulan ukuran relatif dan ukuran absolut. Melaluinya, Anda dapat menyesuaikan semua ukuran font secara proporsional dengan hanya memodifikasi elemen root, dan Anda dapat menghindari reaksi berantai dari penggabungan ukuran font lapis demi lapis. Saat ini, semua browser kecuali IE8 dan versi sebelumnya mendukung rem. Untuk browser yang tidak mendukung, solusinya sangat sederhana, yaitu dengan menulis pernyataan unit absolut tambahan. Browser ini mengabaikan ukuran font yang disetel dengan rem.

%: Selain itu, kita juga dapat menggunakan persentase untuk menentukan ukuran, yang mewakili kelipatan font saat ini dibandingkan dengan ukuran font default browser. Unit ini juga sering digunakan dalam desain responsif halaman.

 html{ukuran font:62,5%;/* 10±16=62,5% */}badan{ukuran font:12px;ukuran font:1,2rem;/* 12±10=1,2 */}p{ukuran font :14px;ukuran font:1.4rem;}

Perlu dicatat bahwa agar kompatibel dengan browser yang tidak mendukung rem, kita perlu menulis nilai px yang sesuai di depan rem, sehingga browser yang tidak mendukungnya dapat diturunkan versinya dengan baik. Faktanya, Anda tidak perlu terlalu khawatir apakah akan menggunakan ukuran font default: 100% atau mengaturnya ke ukuran font: 62,5%. Jika Anda memperkenalkan alat pra-pemrosesan CSS, Anda secara alami dapat menggunakan nilai default Jika Anda menggunakan ukuran font: 62,5% karena alasan lain Tidak ada yang salah dengan itu, Anda dapat mengatur ulang kembali ke ukuran font default yang Anda perlukan di badan.

3. Pemrosesan gambar dan video yang responsif

http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#

1. Gambar latar belakang----kueri media

2. Pencairan gambar ---- gambar elastis

 img, objek { lebar maksimal: 100%;}https://www.filamentgroup.com/examples/responsive-images/

3. Elemen <gambar> HTML5

Elemen <picture> HTML5 dapat mengatur banyak gambar.

Dukungan peramban

 <gambar> <source srcset=images/img_smallflower.jpg media=(lebar maksimal: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding: 0px; garis besar: tidak ada; tinggi garis: 25.2px; ukuran font: 14px; lebar: 660px; overflow: tersembunyi; jelas: keduanya; font-family: tahoma, arial, Microsoft YaHei;"> 
 <skrip src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>
 4. Gunakan tag noscript untuk membuat gambar responsif
 Js memuat dinamis gambar besar dan kecil 
 <span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=teks alternatif Anda class=responsivize> <img src=big.jpg></noscript > <tipe skrip=teks/javascript>var responsiveImageTag = { replaceInitialImages:function(respons) { var platform = desktop var resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.length; //Pengujian lebar perangkat tampilan saat ini if(screen.width <= 767){ //767px, lebih kecil dari ipad semua mengira itu adalah platform seluler = seluler } //setel elemen sumber awal pada gambar untuk(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img); = seluler){ img.src = noScriptElem.attr(data-mobilesrc); img.src = noScriptElem.attr(data-fullsrc); } img.className = responsif; $('.img-placeholder').eq(i).html('').append(img); ); responsiveImageTag.replaceInitialImages('responsivize');});</script>
 4. Kerangka responsif
 Kustomisasi: Jika situs web Anda memiliki banyak desain yang beragam, maka jika Anda masih ingin menggunakan bootstrap, Anda perlu memodifikasi kerangka kerja sebagai lapisan terbawah: banyak gaya yang perlu disalin, dan hierarki CSS membingungkan dan sulit untuk dipertahankan.
 Dalam beberapa situasi, bootstrap sangat berguna. Misalnya, jika Anda ingin dengan cepat membangun situs web pribadi yang relatif indah, situs web perusahaan, antarmuka manajemen backend blog, dan proyek lain yang tidak memerlukan penyesuaian halaman yang tinggi, seringkali lebih cocok untuk proyek backend. Sebagian besar browser sistem backend kompatibel dengan baik gaya konsesi dan tidak mudah untuk menggali detailnya. Atau Anda mungkin tidak berpengalaman dalam membangun front-end situs web, mengingat kompatibilitas browser dan ukuran perangkat yang tak terhitung jumlahnya akan menyelesaikan banyak masalah untuk Anda.