Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML, bermula dari awal-html tutorial-php.cn

Ketahui pengetahuan dan kemahiran asas reka letak responsif HTML, bermula dari awal

PHPz

Lepaskan： 2024-01-27 09:25:06

asal

1178 orang telah melayarinya

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;

Salin selepas log masuk

}
}

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!