響應式布局到底怎樣玩？
1.jpg
響應式 Web 設計 - Viewport
什么是 Viewport?
viewport 是用戶網(wǎng)頁的可視區(qū)域。
viewport 翻譯為中文可以叫做"視區(qū)"栗菜。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬蹄梢，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局）苛萎，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
設置 Viewport
一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小检号，可以指定的一個值腌歉，如 600，或者特殊的值齐苛，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）翘盖。
height：和 width 相對應，指定高度凹蜂。
initial-scale：初始縮放比例馍驯，也即是當頁面第一次 load 的時候縮放比例阁危。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例汰瘫。
user-scalable：用戶是否可以手動縮放狂打。
響應式歸根到底就是切換不同的CSS樣式表
1、首先看看媒體查詢：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒體查詢</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
@media (min-width:768px) and (max-width:999px) {
.box {
background-color: green;
}
}
@media (min-width:1000px) {
.box {
background-color: purple;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2混弥、準備工作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/pad.css" @media="(min-width:768px)"/>
<link rel="stylesheet" type="text/css" href="css/pc.css" @media="(min-width:1000px)"/>
<link rel="stylesheet" type="text/css" href="css/pc-width.css" @media="(min-width:1190px)"/>
</head>
<body>
</body>
</html>
如何在不同的寬度下加載不同的樣式：
image.png
我的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/reset.css"/>
<link rel="stylesheet" type="text/css" href="style/common.css"/>
<link rel="stylesheet" type="text/css"
href="style/pad.css" @media="(min-width:768px)"/>
<link rel="stylesheet" type="text/css"
href="style/pc.css" @media="(min-width:1000px)"/>
<link rel="stylesheet" type="text/css"
href="style/pc-w.css" @media="(min-width:1190px)"/>
</head>
<body>
</body>
</html>
下面我簡單做一個例子：
html
image.png
css
image.png
image.png
image.png
切換的效果：
切換到max-width:500px,變成黑色
image.png
切換到min-width:500px,變成白色
image.png
