Reka Bentuk Responsif: Satu Halaman, Semua Skrin

18 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Tambah tag meta viewport dan terangkan kenapa telefon memerlukannya
Gantikan lebar tetap dengan lebar fleksibel (max-width, %) dan jadikan gambar mengecil supaya muat
Tulis media query mobile-first dengan min-width

Idea utama

Kebanyakan orang akan buka laman anda di telefon. Bina untuk skrin kecil dahulu, biar elemen memanjang sendiri, kemudian tambah susun atur untuk skrin besar dengan media query.

Halaman responsif tidak ada "versi mobile" dan "versi desktop". Ia satu halaman yang susun aturnya menyesuaikan diri dengan ruang yang ada. Caranya, empat tabiat kecil.

1. Tag meta viewport

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

Tanpa baris ini, pelayar mudah alih menganggap halaman anda direka untuk desktop. Ia menyusun halaman pada skrin maya yang lebar (selalunya sekitar 980px) dan mengecilkan semuanya, jadi teks jadi halus sangat. Tag ini memberitahu: guna lebar sebenar peranti. Letakkannya dalam <head>, pada setiap halaman.

2. Lebar yang fleksibel

Tetap: sentiasa 960px, walaupun di telefon 360px

CSS

.container {
  width: 960px;
  margin: 0 auto;
}

Fleksibel: sehingga 960px, lebih kecil bila perlu

CSS

.container {
  max-width: 960px;
  margin: 0 auto;
}

max-width menetapkan had maksimum, bukan saiz tetap. Di skrin besar rupanya sama; di telefon ia mengecil dan tidak menyebabkan skrol ke tepi.

3. Gambar yang fleksibel

CSS

img {
  max-width: 100%; /* never wider than its container */
  height: auto;    /* keep the proportions when it shrinks */
}

Kekalkan juga atribut width dan height pada tag <img> anda. Pelayar menggunakannya untuk menyimpan ruang yang betul sebelum gambar dimuat turun, jadi halaman tidak melompat-lompat.

4. Media query mobile-first

Media query membalut CSS yang hanya digunakan bila sesuatu syarat benar. Mobile-first bermaksud CSS biasa anda ialah susun atur telefon, dan query min-width menambah perubahan apabila skrin semakin besar:

style.css

/* Phones: one column (the default) */
.cards {
  display: grid;
  gap: 16px;
}

/* 600px and wider: two columns */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 900px and wider: three columns */
@media (min-width: 900px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Susunan penting

Pada skrin 1000px, kedua-dua query di atas adalah benar. Bila dua peraturan sama spesifik, yang datang kemudian dalam fail akan menang. Jadi dengan min-width, tulis breakpoint anda dari kecil ke besar.

Memilih breakpoint

Jangan kejar model telefon tertentu. Lebarkan pratonton sedikit demi sedikit, dan tambah breakpoint di tempat susun atur anda mula nampak terlalu renggang atau sempit. Guna butang Telefon, Tablet dan Penuh di atas pratonton untuk menguji.

%: Peratusan daripada saiz induk.
rem: Relatif kepada saiz fon akar (biasanya 16px). Sesuai untuk saiz fon dan jarak yang menghormati tetapan pengguna.
vw / vh: 1% daripada lebar / tinggi viewport. 100vh ialah setinggi satu skrin penuh.

Klik butang Telefon di atas pratonton: halaman lebih lebar daripada skrin. Betulkan dalam tiga langkah:

1. Dalam index.html, tambah tag meta viewport di dalam <head>. 2. Dalam style.css, jadikan .container fleksibel: tukar width yang tetap kepada max-width. 3. Tambah peraturan img supaya gambar tidak pernah lebih lebar daripada bekasnya dan kekal seimbang.

Semakan

Halaman ada tag meta viewport yang guna lebar peranti
.container mengecil supaya muat telefon selebar 320px
Gambar tidak boleh lebih lebar daripada bekasnya

Uji kefahaman

Apa yang berlaku pada kebanyakan telefon jika anda tidak letak tag meta viewport?

Halaman tidak akan dimuatkanHalaman disusun seolah-olah di skrin desktop yang lebar, kemudian dizum keluar jadi teks nampak halusMedia query berjalan dua kali

Dalam stylesheet mobile-first, CSS di luar media query adalah untuk apa?

Skrin desktop sahajaSkrin kecil — dan ia asas yang dibina oleh setiap skrin lebih besarCetakan

Apa yang img { max-width: 100%; } lakukan?

Memanjangkan setiap gambar sehingga memenuhi bekasnyaMembenarkan gambar mengecil supaya muat dalam bekasnya, tetapi tidak membesar melebihi saiz asalnyaMemotong gambar

Apa yang anda pelajari

Setiap halaman perlukan <meta name="viewport" content="width=device-width, initial-scale=1">.
Utamakan max-width berbanding width tetap; beri gambar max-width: 100%; height: auto.
Mobile-first: CSS default untuk telefon, @media (min-width: …) untuk menambah susun atur bagi skrin lebih besar.
Tulis breakpoint min-width dari kecil ke besar — peraturan yang datang kemudian akan menang.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.