hujung hadapan web
html tutorial
Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML, bermula dari awal
Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML, bermula dari awal
Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML
Dengan populariti peranti mudah alih, reka letak responsif telah menjadi kemahiran penting untuk mereka bentuk dan membangunkan tapak web. Reka letak responsif membolehkan tapak web melaraskan reka letak dan kesan paparan secara automatik di bawah saiz skrin yang berbeza, memberikan pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan cara mempelajari pengetahuan dan kemahiran asas reka letak responsif HTML dari awal, dan memberikan contoh kod khusus.
1. Pertanyaan media HTML
Pertanyaan media ialah salah satu asas reka letak responsif. Ia boleh menggunakan helaian gaya yang berbeza berdasarkan saiz skrin peranti, orientasi, resolusi dan ciri-ciri lain. Pertanyaan media ditakrifkan menggunakan peraturan @media. Berikut ialah contoh pertanyaan media ringkas:
@skrin media dan (lebar maksimum: 600px) {
badan {
background-color: lightblue;
}
}
Maksud kod ini ialah apabila lebar skrin kurang daripada atau sama dengan 600 piksel, Tetapkan warna latar belakang badan kepada biru muda. Pelbagai sifat dan nilai CSS boleh digunakan dalam pertanyaan media untuk mencapai pelarasan susun atur yang kompleks.
2. Susun atur bendalir
Susun atur aliran ialah mod reka letak responsif biasa, yang melaraskan saiz dan susunan kandungan web secara automatik mengikut lebar skrin. Dalam susun atur bendalir, lebar unsur secara amnya adalah peratusan berbanding unsur induknya. Berikut ialah contoh susun atur bendalir mudah:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 33.33%;
background-color: lightgray;
padding: 10px;
box-sizing: border-box;
}
@media screen and (max-width: 600px) {
.box {
width: 50%;
}
}
</style>Dalam kod di atas, elemen bekas menggunakan susun atur fleksibel, dan elemen kotak disusun mengikut peratusan. Apabila lebar skrin kurang daripada atau sama dengan 600 piksel, lebar elemen kotak dilaraskan kepada 50% melalui pertanyaan media.
3. Reka Letak Grid Fleksibel
Reka Letak Grid Fleksibel ialah mod reka letak responsif yang lebih maju yang menggunakan ciri reka letak grid CSS untuk mencapai pelarasan automatik berbilang lajur. Reka letak grid fleksibel secara automatik melaraskan kiraan lajur dan saiz grid berdasarkan lebar skrin dan saiz elemen. Berikut ialah contoh susun atur grid elastik mudah:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.box {
background-color: lightgray;
padding: 10px;
box-sizing: border-box;
}
</style>Dalam kod di atas, elemen kontena menggunakan reka letak grid dan mentakrifkan lebar minimum dan maksimum setiap lajur melalui atribut grid-template-columns. Melalui fungsi ulangan dan kata kunci muat automatik, kesan melaraskan bilangan lajur secara automatik boleh dicapai.
4. Rangka Kerja CSS
Selain menulis kod HTML dan CSS secara manual, anda juga boleh menggunakan beberapa rangka kerja CSS siap sedia untuk memudahkan pembangunan reka letak responsif. Rangka kerja CSS yang biasa digunakan termasuk Bootstrap, Foundation, dsb. Rangka kerja ini menyediakan set komponen dan gaya yang kaya yang membantu membina reka letak responsif dengan cepat. Berikut ialah contoh menggunakan rangka kerja Bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">Box 1</div>
<div class="col-sm-6 col-md-4">Box 2</div>
<div class="col-sm-6 col-md-4">Box 3</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dalam kod di atas, sistem grid Bootstrap digunakan untuk melaksanakan reka letak responsif. Melalui kelas kol dan titik putus skrin yang berbeza, anda boleh menentukan lebar dan susunan elemen di bawah saiz skrin yang berbeza.
Ringkasan:
Mempelajari reka letak responsif HTML dari awal memerlukan penguasaan pengetahuan dan kemahiran asas seperti pertanyaan media, reka letak bendalir dan reka letak grid elastik. Melalui latihan dan percubaan berterusan, anda boleh memperdalam pemahaman anda tentang reka letak responsif dan meningkatkan keupayaan reka letak anda. Di samping itu, menggunakan rangka kerja CSS boleh mempercepatkan pembangunan dan meningkatkan kecekapan. Saya harap contoh kod yang disediakan dalam artikel ini dapat membantu pembaca mempelajari dan mengamalkan reka letak responsif HTML dengan lebih baik.
Atas ialah kandungan terperinci Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML, bermula dari awal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
