Teknik biasa dalam reka bentuk web responsif

Artikel ini meneroka teknik yang berkesan untuk mewujudkan susun atur laman web responsif dan pengalaman pengguna. Kami akan mengkaji kaedah untuk membina grid cecair yang menyesuaikan diri dengan pelbagai saiz skrin, memastikan pengalaman pengguna yang konsisten merentasi peranti. Kami juga akan menyelidiki media yang kaya, terutamanya imej, untuk meminimumkan penggunaan jalur lebar pada skrin yang lebih kecil.

Beberapa kaedah untuk menguji responsif tapak anda pada peranti yang berbeza digariskan di bawah:

1. Gunakan bookmarket reka bentuk web responsif, sedia ada dalam talian, untuk menguji susun atur laman web anda di pelbagai resolusi.

2. Gunakan mod snap Windows 8 dengan Internet Explorer 10 untuk mensimulasikan saiz skrin yang berbeza, termasuk paparan telefon pintar dan tablet.

3. menjalankan ujian manual merentasi pelbagai peranti dan resolusi skrin (seperti yang ditunjukkan dalam Rajah 1).

Rajah 1. Ujian Asas untuk Reka Bentuk Web Responsif

Pertimbangan utama:

• memanfaatkan pertanyaan media CSS3 untuk membuat peraturan gaya bergantung pada saiz skrin, jenis media, dan ciri -ciri peranti lain.
• Memahami perbezaan antara piksel CSS dan piksel perkakasan, terutamanya penting untuk skrin kepadatan piksel tinggi.
• Mengamalkan pendekatan reka bentuk pertama mudah alih, mengutamakan pengalaman pengguna mudah alih dan meningkatkan secara progresif untuk skrin yang lebih besar.
• Melaksanakan imej responsif menggunakan teknik atau perpustakaan JavaScript untuk menyesuaikan kualiti imej berdasarkan keupayaan peranti.
• Gunakan grid bendalir dan skala berasaskan peratusan dalam titik putus untuk mengekalkan paparan kandungan berkadar.
• Mengoptimumkan bacaan teks dengan menyesuaikan saiz fon, jarak garis, dan jarak huruf melalui pertanyaan media CSS.
• Meningkatkan kebolehgunaan bentuk pada peranti mudah alih menggunakan jenis input HTML5 untuk tingkah laku papan kekunci yang dioptimumkan.

pertanyaan media dan seterusnya:

Secara tradisinya, menghidu ejen pengguna digunakan untuk mengesan jenis peranti dan mengalihkan pengguna ke versi tapak yang berbeza. Pertanyaan media CSS3 menawarkan pendekatan yang unggul, memisahkan penciptaan kandungan dari persembahan. Mereka membolehkan pemaju untuk menentukan gaya bersyarat pada saiz skrin, jenis media, dan atribut peranti lain. Walau bagaimanapun, hanya membuat susun atur lebar tetap untuk saiz skrin yang berbeza bukan reka bentuk responsif yang benar. Penskalaan berkadar adalah kunci.

Memahami piksel:

Makna "piksel" telah berkembang dengan kemunculan skrin kepadatan piksel tinggi. W3C mentakrifkan pixel rujukan (atau css pixel ), yang berbeza dari pixel perkakasan . Nisbah di antara mereka ialah nisbah pixel peranti . Walaupun nisbah piksel peranti adalah penting untuk mengoptimumkan muat turun imej, ia tidak seharusnya menentukan susun atur halaman. Fokus pada merancang untuk piksel rujukan untuk memastikan saiz visual yang konsisten merentasi peranti. Anda boleh menggunakan pertanyaan media untuk menargetkan nisbah piksel peranti tertentu jika diperlukan:

perpustakaan JavaScript seperti GetDevicePixelRatio juga boleh membantu dalam mengira nisbah piksel peranti untuk pengoptimuman imej selanjutnya.

/* Note that device-pixel-ratio might need vendor prefixes */
@media screen and (device-pixel-ratio: 1.5) {
  /* Adjust layout for 1.5 hardware pixels per reference pixel */
}
@media screen and (device-pixel-ratio: 2) {
  /* Adjust layout for 2 hardware pixels per reference pixel */
}

Teknik susun atur responsif:

Tata letak responsif melibatkan dua teknik utama: mengenal pasti titik putus di mana perubahan susun atur diperlukan dan kandungan skala yang berkadar antara titik putus tersebut. Pendekatan

mudah alih

adalah disyorkan, mengutamakan pengguna mudah alih dan meningkatkan secara progresif untuk skrin yang lebih besar. Microsoft.com yang direka bentuk semula berfungsi sebagai kajian kes yang menarik, menunjukkan bagaimana tapak dapat menyesuaikan diri dengan pelbagai saiz skrin, sentiasa memaksimumkan penggunaan ruang yang ada. Lebar berasaskan peratusan adalah kaedah praktikal untuk mencapai susun atur grid cecair. Menggabungkan ini dengan pertanyaan media CSS3 membolehkan perubahan susun atur pada titik putus tertentu, mewujudkan pengalaman yang benar -benar responsif. Rangka kerja seperti Gumby, Skeleton, dan CSS Grid dapat memudahkan proses ini.

Pengoptimuman imej:

Imej sering merupakan bahagian yang paling intensif jalur lebar dari laman web. CSS3 menawarkan beberapa teknik untuk mengurangkan pergantungan pada imej, termasuk fon tersuai (), kecerunan latar belakang, sudut bulat (

), transformasi 2D, dan bayang -bayang kotak/teks. Untuk imej yang tidak dapat diganti, teknik dan perpustakaan JavaScript boleh memuatkan saiz imej yang sesuai secara dinamik berdasarkan keupayaan peranti dan resolusi skrin. Pendengar pertanyaan media membenarkan pelarasan on-the-fly apabila saiz skrin berubah. Perpustakaan seperti teknik Filament Group, AdaptiveImages.com, dan polyfill Tyson Matanich menyediakan alat yang berguna untuk tujuan ini.

@font-face border-radius pengoptimuman teks dan borang:

Pengisaran teks responsif melibatkan penyesuaian saiz fon, jarak garis, dan jarak huruf berdasarkan lebar skrin untuk mengekalkan kebolehbacaan. Perpustakaan seperti Fittext boleh membantu dengan ini. Untuk borang, menggunakan jenis input HTML5 (, , dan lain -lain) meningkatkan kebolehgunaan pada peranti sentuh dengan menyediakan susun atur papan kekunci yang dioptimumkan.

tel Kesimpulan: email

Reka bentuk web responsif adalah evolusi yang berterusan, tetapi teknik -teknik yang diterangkan di sini memberikan asas yang kukuh untuk mewujudkan laman web yang memberikan pengalaman yang konsisten dan menarik di semua peranti. Ingatlah untuk menguji dengan teliti dan mengutamakan pendekatan pertama mudah alih.

Atas ialah kandungan terperinci Teknik biasa dalam reka bentuk web responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!