Corak Min-Width dan Max-Width
Hadkan unsur dengan min-width dan max-width untuk lebar bacaan yang selesa.
Corak Min-Width dan Max-Width ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Gambaran Keseluruhan min-width dan max-width
min-width menetapkan saiz minimum yang boleh dikecilkan oleh sesuatu elemen. max-width menetapkan had atas. Bersama-sama, kedua-duanya menghasilkan elemen responsif yang boleh mengembang atau mengecut dalam julat yang ditetapkan.
max-width untuk Kandungan yang Mudah Dibaca
Baris teks yang panjang sukar dibaca. Hadkan bekas teks kepada panjang baris yang selesa:
<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>max-width untuk Bekas Berpusat
Corak bekas berpusat dengan max-width yang klasik:
<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>min-width untuk Mengelakkan Elemen Runtuh
min-width menghalang elemen daripada mengecil di bawah saiz yang boleh digunakan:
<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
<tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>Fleksibel antara Had
Menggabungkan width, min-width dan max-width menghasilkan elemen fleksibel yang dibatasi oleh had mutlak:
<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>max-width: 100% untuk Imej Responsif
Halang imej daripada melimpah keluar dari bekasnya:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />min() untuk max-width Tanpa Pemboleh Ubah CSS
Gunakan min() sebagai satu baris kod untuk lebar fleksibel dengan had maksimum:
<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>min-content dan max-content sebagai Nilai
Gunakan kata kunci penentuan saiz intrinsik sebagai nilai:
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>Lajur Jadual dengan min-width
Halang sel jadual daripada menjadi terlalu sempit sehingga teks sukar dibaca:
<table style="border-collapse:collapse;width:100%;">
<tr>
<td style="border:1px solid #ccc;">Short</td>
<td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
</tr>
</table>Julat Lebar Pertanyaan Media
min-width dan max-width juga digunakan dalam pertanyaan media untuk menentukan titik henti responsif:
<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>Bekas dengan Jarak Dalaman Tidak Simetri
Pada skrin yang sangat lebar, pusatkan kandungan sambil mengekalkan ruang lapang dari tepi:
<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>Semakan Pantas
Peraturan CSS manakah yang memastikan imej sentiasa muat dalam bekas induknya tanpa herotan?
Rumusan
max-width mengehadkan saiz elemen untuk kandungan yang mudah dibaca dan bekas berpusat. min-width menghalang elemen daripada runtuh di bawah dimensi yang boleh digunakan. Menggabungkan kedua-duanya menghasilkan elemen fleksibel yang boleh berubah saiz antara had yang ditetapkan. Sentiasa tambahkan max-width: 100%; height: auto pada imej untuk tingkah laku responsif.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Corak Min-Width dan Max-Width” percuma?
Ya — teks penuh “Corak Min-Width dan Max-Width” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Corak Min-Width dan Max-Width”?
Hadkan unsur dengan min-width dan max-width untuk lebar bacaan yang selesa. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Corak Min-Width dan Max-Width” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pendekatan Utamakan Mudah Alih berbanding Utamakan Desktop
- Lebar Lancar dengan Peratusan
- Corak Min-Width dan Max-Width
- Imej Responsif dan Unsur Picture