什么是自适应布局？自适应布局如何实现？
在前端布局中有一种布局叫自适应布局，那么，自适应布局是什么意思呢？自适应布局又如何实现？本篇文章将给大家来介绍自适应布局的意思以及自适应布局的实现方法。
首先我们来看什么是自适应布局？
所谓自适应布局我们从百度上可以搜到如下的定义自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。简单的来说自适应就是让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。
知道了自适应布局是怎么一回事后，那么我们就来看一看自适应布局该如何实现？
页面的自适应布局分为高度自适应和宽度自适应，实现方式其实有挺多的，下面我们就来以三列布局为例来看看自适应布局的实现方式。
一、自适应布局之高度自适应
高度自适应就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。
高度自适应布局代码如下：
<body>
<div class="top">120px</div>
<div class="main">自适应</div>
<div class="bottom">120px</div>
</body>.top{
width: 100%;
height: 120px;
position: absolute;
background-color: greenyellow;
}
.main{
position: absolute;
width: 100%;
top: 120px;
bottom: 120px;
background-color: pink;
height: auto;
}
.bottom{
position: absolute;
bottom: 0;//别漏了
width: 100%;
height: 120px;
background-color:greenyellow ;
}高度自适应布局效果如下：
二、自适应布局之宽度自适应
宽度自适应有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。
下面我们来分别看看这三种方法实现的自适应布局（三列）
1、利用绝对定位来设置宽度自适应布局
说明：针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动。
绝对定位设置宽度自适应布局代码如下：
<body>
<div class="left">200px</div>
<div class="main">自适应</div>
<div class="right">200px</div>
</body>html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left,
.right {
width: 200px;
display: inline;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}
.main {
position: absolute;
left: 200px;
right: 200px;
height: 100%;
background-color: pink;
display: inline;
}宽度自适应布局效果如下：
2、利用margin，中间模块先渲染来设置宽度自适应布局
说明：中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。
注意：自适应的div必须放在left和right前面且包含在一个父div里。
利用margin，中间模块先渲染设置宽度自适应布局的代码如下：
<body>
<div class="main"> <!--看清楚，这里用一个父div包住-->
<div class="content">自适应</div>
</div>
<div class="left">200px</div>
<div class="right">200px</div>
</body>html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
width: 100%;
height: 100%;
float: left;
}
.main .content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%; //important
}
.right {
margin-left: -200px; //important
}宽度自适应布局效果如下：
3、利用自身浮动来设置宽度自适应布局
说明：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。
利用自身浮动设置宽度自适应布局代码如下：
<body>
<div class="left">200px</div>
<div class="right">200px</div>
<div class="main">自适应</div>
</body>html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
margin: 0 200px;
height: 100%;
background-color: pink;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}宽度自适应布局效果如下：
最后：
本篇文章带到这里就结束了关于自适应布局若想认识更多可以看看2018年最新的8个响应式与自适应视频教程推荐，里面有最新的免费视频教程可以观看。
Atas ialah kandungan terperinci 什么是自适应布局？自适应布局如何实现？. 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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif
Sep 26, 2023 am 11:34 AM
Panduan Reka Bentuk Responsif React: Cara Mencapai Kesan Susun Adaptif Bahagian Hadapan Dengan populariti peranti mudah alih dan permintaan pengguna yang semakin meningkat untuk pengalaman berbilang skrin, reka bentuk responsif telah menjadi salah satu pertimbangan penting dalam pembangunan bahagian hadapan moden. React, sebagai salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, menyediakan pelbagai alatan dan komponen untuk membantu pembangun mencapai kesan reka letak penyesuaian. Artikel ini akan berkongsi beberapa garis panduan dan petua untuk melaksanakan reka bentuk responsif menggunakan React, dan menyediakan contoh kod khusus untuk rujukan. Fle menggunakan React
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama ketinggian, lebar sama, dan jarak yang sama
Oct 27, 2023 pm 05:51 PM
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi, sama lebar, sama jarak Contoh kod khusus Pengenalan: Dalam reka bentuk web moden, reka letak adalah faktor yang sangat kritikal. Untuk halaman yang perlu memaparkan sejumlah besar kandungan, cara mengatur kedudukan dan saiz elemen secara munasabah untuk mencapai keterlihatan yang baik dan kemudahan penggunaan adalah isu penting. Flexbox (Tempat Letak Kotak Fleksibel) ialah alat yang sangat berkuasa di mana pelbagai keperluan susun atur fleksibel boleh direalisasikan dengan mudah. Artikel ini akan memperkenalkan Flexbox secara terperinci
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama suai
Oct 21, 2023 am 10:00 AM
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama suai, contoh kod khusus diperlukan Pengenalan: Dalam reka bentuk dan pembangunan web, melaksanakan susun atur ketinggian sama suai adalah keperluan biasa. Kaedah susun atur CSS tradisional sering menghadapi beberapa kesukaran apabila berurusan dengan susun atur ketinggian yang sama, dan susun atur Flexbox memberikan kami penyelesaian yang mudah dan berkuasa. Artikel ini akan memperkenalkan konsep asas dan penggunaan biasa susun atur Flexbox, dan memberikan contoh kod khusus untuk membantu pembaca menguasai penggunaan Flexbox dengan cepat untuk melaksanakan mereka sendiri
Cara menggunakan Vue untuk melaksanakan carta statistik reka letak penyesuaian
Aug 20, 2023 pm 10:25 PM
Gambaran keseluruhan cara menggunakan Vue untuk melaksanakan reka letak suai carta statistik: Dalam aplikasi web moden, carta statistik merupakan bahagian penting dalam memaparkan data. Menggunakan Vue.js anda boleh dengan mudah melaksanakan reka letak adaptif carta statistik untuk menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza. Artikel ini akan memperkenalkan cara menggunakan Vue dan beberapa perpustakaan carta yang biasa digunakan untuk mencapai matlamat ini. Cipta projek Vue dan pasang kebergantungan Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI untuk membina struktur projek dengan cepat. Dalam larian terminal sebagai
Cara menggunakan CSS untuk melaksanakan susun atur berbilang lajur adaptif
Oct 19, 2023 am 09:25 AM
Cara menggunakan CSS untuk melaksanakan reka letak berbilang lajur adaptif Dengan populariti peranti mudah alih, semakin banyak tapak web perlu menyesuaikan diri dengan saiz skrin yang berbeza. Menggunakan CSS untuk melaksanakan reka letak berbilang lajur adaptif ialah kemahiran penting yang boleh menjadikan tapak web anda kelihatan bagus pada pelbagai peranti. Artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan reka letak berbilang lajur adaptif dan memberikan contoh kod khusus. 1. Gunakan susun atur Flexbox Susun atur Flexbox ialah model susun atur berkuasa dalam CSS3 yang boleh melaksanakan susun atur berbilang lajur dengan mudah. pertama,
Petua pengoptimuman sifat reka letak adaptif CSS: flex dan grid
Oct 21, 2023 am 08:03 AM
Petua pengoptimuman atribut reka letak adaptif CSS: flex dan grid Dalam pembangunan web moden, melaksanakan susun atur penyesuaian adalah tugas yang sangat penting. Dengan populariti peranti mudah alih dan kepelbagaian saiz skrin, adalah keperluan penting untuk memastikan tapak web boleh dipaparkan dengan baik pada pelbagai peranti dan menyesuaikan diri dengan saiz skrin yang berbeza. Nasib baik, CSS menyediakan beberapa sifat dan teknik yang berkuasa untuk melaksanakan reka letak penyesuaian. Artikel ini akan menumpukan pada dua sifat yang biasa digunakan: flex dan grid, dan memberikan contoh kod khusus.
Memperkenalkan atribut lebar yang berbeza dalam CSS
Feb 20, 2024 am 10:03 AM
Pengenalan kepada pelbagai lebar dalam CSS memerlukan contoh kod khusus Dalam CSS, lebar (lebar) ialah atribut yang biasa digunakan untuk menentukan lebar sesuatu elemen. Dalam pembangunan sebenar, kita akan menghadapi banyak situasi di mana kita perlu menetapkan lebar elemen, dan CSS menyediakan pelbagai cara untuk memenuhi keperluan kita. Artikel ini akan memperkenalkan pelbagai sifat lebar dalam CSS secara terperinci dan memberikan contoh kod khusus. width:autoApabila kita tidak menentukan lebar elemen dalam CSS, nilai lebar lalai ialah
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur berkadar penyesuaian
Oct 25, 2023 am 11:46 AM
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur berkadar adaptif Dalam pembangunan web moden, susun atur responsif semakin menarik perhatian. Flexbox (susun atur kotak fleksibel) ialah model reka letak yang berkuasa dalam CSS yang boleh membantu pembangun dengan mudah melaksanakan reka letak berkadar penyesuaian. Artikel ini akan memperkenalkan cara menggunakan Flexbox untuk melaksanakan reka letak ini, dengan contoh kod khusus. Flexbox ialah model berdasarkan bekas dan item Dengan menetapkan sifat bekas, anda boleh mengawal
