溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css3自適應布局如何實現(xiàn)”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3自適應布局如何實現(xiàn)”文章能幫助大家解決問題。
自適應布局又稱“響應式布局”，是指可以自動識別屏幕寬度、并做出相應調整的網(wǎng)頁布局；這樣的網(wǎng)頁能夠兼容多個不同的終端，而不是為每個終端做一個特定的版本。自適應布局是為解決移動端瀏覽網(wǎng)頁而誕生的，能夠為使用不同終端的用戶提供很好的用戶體驗。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
什么是自適應布局
自適應布局又稱“響應式布局”，可以自動識別屏幕寬度、并做出相應調整的網(wǎng)頁布局，簡單來講就是網(wǎng)頁能夠兼容多個不同的終端（設備），而不是為每個終端做一個特定的版本。
其實簡單來講自適應與非自適應的不同就是一個頁面不管在什么設備的分辨率下都能自動識別適應，為瀏覽的用戶帶來了更好的體驗效果。
這個概念是為解決移動端瀏覽網(wǎng)頁而誕生的。自適應布局能夠為使用不同終端的用戶提供很好的用戶體驗，而且隨著大屏智能手機的普及，用“大勢所趨”來形容也不為過。
css3實現(xiàn)自適應布局的方法
常用的方式有以下幾種：
使用 CSS 中的媒體查詢（最簡單）；
使用 JavaScript（使用成本比較高）；
使用第三方開源框架（例如 bootstrap，可以很好的支持各種瀏覽器）。
接下來我們以媒體查詢?yōu)槔齺砭唧w演示一下自適應布局的實現(xiàn)。
1、設置 meta 標簽
首先，我們需要設置 meta 標簽來告訴瀏覽器，讓視口（網(wǎng)頁的可視區(qū)域）的寬度等于設備的寬度，并禁止用戶對頁面的縮放，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
在設置視口時需要注意，視口就是網(wǎng)頁可見區(qū)域的尺寸，設置視口時只設置寬度就行，不用在乎高度，具體高度由網(wǎng)頁內容自動撐開。上面 meta 標簽中內容的含義如下：
viewport：即視口，表示網(wǎng)頁的可視區(qū)域；
width：控制 viewport 的大小，可以指定一個具體的值，例如 600，也可以是由關鍵字組成的特殊值，例如 device-width 就表示設備的寬度；
initial-scale：表示初始縮放比例，也就是頁面第一次加載時的縮放比例；
maximum-scale：表示允許用戶縮放的最大比例，范圍從 0 到 10.0；
minimum-scale：表示允許用戶縮放到最小比例，范圍從 0 到 10.0；
user-scalable：表示用戶是否可以手動縮放，“yes”表示允許縮放，“no”表示禁止縮放。
2、媒體查詢
CSS 媒體查詢可以根據(jù)指定的條件，針對不同的媒體類型（screen print）定義不同的 CSS 樣式，讓使用不同設備的用戶都能得到最佳的體驗。
關于媒體查詢有以下三種實現(xiàn)方式：
1）、直接在 CSS 文件中使用，示例代碼如下：
@media (max-width: 320px) {
/*0~320*/
body {
background: pink;
}
}
@media (min-width: 321px) and (max-width: 375px) {
/*321~768*/
body {
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px) {
/*376~425*/
body {
background: yellow;
}
}
@media (min-width: 426px) and (max-width: 768px) {
/*426~768*/
body {
background: blue;
}
}
@media (min-width: 769px) {
/*769~+∞*/
body {
background: green;
}
}2）、使用 @import 導入，示例代碼如下：
@import 'index01.css' screen and (max-width:1024px) and (min-width:720px) @import 'index02.css' screen and (max-width:720px)
3）、在 link 標簽中使用，示例代碼如下：
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
下面通過一個綜合的示例來演示一下響應式布局的實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自適應布局（響應式布局）</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<style>
*{
margin: 0px;
padding: 0px;
font-family: "微軟雅黑";
}
#head, #foot, #main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: goldenrod;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: green;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left, .center, .right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: red
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head, #foot, #main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left, .center, .right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</head>
<body>
<div>
<header id="head">
<ul>
<li>header1</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
</ul>
<div>icon</div>
</header>
<section id="main">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer id="foot">
footer
</footer>
</div>
</body>
</html>當瀏覽器窗口小于 1200 像素大于 980 像素時，和大于 640 像素小于 980 像素時的樣式是不同的
關于“css3自適應布局如何實現(xiàn)”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
