Artikel ini telah menjelaskan secara rinci konsep tata letak responsif, kelebihan dan kerugian dari tata letak responsif, konsep desain, dan kode implementasi spesifik. Ini adalah artikel yang langka. Di sini kami merekomendasikannya kepada Friends 1. Apa itu tata letak responsif?
Tata Letak Responsif adalah konsep yang diusulkan oleh Ethan Marcotte pada Mei 2010. Singkatnya, sebuah situs web dapat kompatibel dengan banyak terminal - daripada membuat versi spesifik untuk setiap terminal.
Konsep ini lahir untuk menyelesaikan penelusuran internet seluler. Tata letak responsif dapat memberikan pengguna terminal yang berbeda dengan antarmuka yang lebih nyaman dan pengalaman pengguna yang lebih baik. Selain itu, dengan mempopulerkan perangkat seluler layar besar saat ini, tidak berlebihan untuk menggambarkannya sebagai tren umum.
Karena semakin banyak desainer mengadopsi teknologi ini, kami tidak hanya melihat banyak inovasi, tetapi juga beberapa model yang dibentuk.
2. Apa kelebihan dan kekurangan tata letak responsif? keuntungan:Fleksibilitas yang kuat dalam menghadapi perangkat resolusi yang berbeda
Dapat dengan cepat menyelesaikan masalah adaptasi tampilan multi-perangkat
kekurangan:Kompatibel dengan berbagai peralatan, beban kerja tinggi dan efisiensi rendah
Kode ini rumit, dan elemen -elemen tersembunyi dan tidak berguna akan muncul, yang akan meningkatkan waktu pemuatan.
Faktanya, ini adalah solusi desain kompromi, yang tidak dapat mencapai hasil terbaik karena pengaruh beberapa faktor.
Sampai batas tertentu, struktur tata letak asli situs web akan diubah, dan kebingungan pengguna akan terjadi
3. Bagaimana merancang tata letak yang responsif?1. Bagaimana menyelesaikan masalah kompatibilitas antara perangkat yang berbeda?
Permintaan media di CSS3 dapat menyelesaikan masalah ini.
2. Nilai apa yang bisa didapatkan oleh kueri media?
Perangkat lebar, perangkat-tinggi menampilkan perangkat layar/taktil.
Render lebar dan tinggi jendela, hegth menampilkan perangkat layar/taktil.
Arah genggam perangkat, orientasi horizontal atau vertikal (potret | lanscape) dan printer, dll.
Rasio Layar Aspek Rasio Dot Matrix Printer, dll.
Perangkat Perangkat Perangkat-aspect-ratio-dot Matrix Printer, dll.
Warna objek atau warna daftar warna, indeks warna menampilkan layar.
Resolusi perangkat
3. Struktur dan Penggunaan Sintaksis
Sintaks: @media hanya nama perangkat (pilih kondisi) tidak (pilih kondisi) dan (kondisi pemilihan perangkat), perangkat dua {srules}
penggunaan:
A. Contoh 1: Gunakan @Media di tautan:
<tautan rel = stylesheet type = text /css media = hanya layar dan (max-lebar: 480px), hanya layar dan (max-device-width: 480px) href = link.css rel = nofollow eksternal />
Hanya dalam penggunaan di atas dapat dihilangkan dan dibatasi pada monitor komputer. Kondisi pertama max-width mengacu pada lebar maksimum antarmuka rendering, dan kondisi kedua-perangkat max-device mengacu pada lebar maksimum perangkat.
B. Embed @Media di stylesheet:
Salin kode