由於現在的網頁要相容各種pc尺寸及ipad甚至手機屏幕，所以響應式的網頁變得尤為重要。手寫響應式網頁，具體技術點有： 1.聲明viewport元標簽（響應式網頁必備） <meta name="viewport" content="width=device-width, initial-scale=1 ...
由於現在的網頁要相容各種pc尺寸及ipad甚至手機屏幕，所以響應式的網頁變得尤為重要。手寫響應式網頁，具體技術點有：
1.聲明viewport元標簽（響應式網頁必備）
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
2.頁面中的圖片都要用響應式圖片 如:
img{width:50% (該圖片在父元素中的占比)
max-width:50%;(在父容器中的占比，並且不能超過圖片自身的大小--防止圖片無限放大產生失真)}
3.使用流式佈局（佈局元素使用浮動或行內快）
4.避免使用絕對尺寸如px，使用相對單位em或rem；
em：相對於父元素的字體大小
rem：相對於根目錄的字體大小
5.使用CSS3MediaQuery技術（最重點）
Media：指瀏覽網頁的設備，如：screen(pc/pad/phone/watch/print/tv/projection/tty(針式印表機/cmd)/braille(讀屏軟體)...)
MediaQuery：查詢出當前瀏覽設備類型、解析度、色彩深度、方向(landscape/portait)等等特性。
CSS3 MediaQuery：根據當前瀏覽設備的特性有選擇性執行某些CSS樣式，而忽略其他一些樣式。
具體做法有兩種：
1.有選擇性的執行某些外部CSS文件
<link media="screen and
(min-width:768px) and (max-width:991px)" rel="stylesheet"
href="css/pad.css"/>
特點：只有媒體查詢結果為真的外部樣式文件才會被執行，否則不執行！不足：即使不符合當前瀏覽設備的外部樣式文件，也會被瀏覽器請求！
2.有選擇性的執行某段CSS中的部分樣式
@media screen and (min-width:768px) and
(max-width:991px) {
.box {
margin: 6px;
...
}
}
