前端響應式佈局
概念
Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
步驟
1. 設定 Meta 標籤
大多數移動瀏覽器將html頁面放大為寬的檢視（viewport）以符合螢幕解析度，可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度，按1：1的尺寸顯示並禁止初始的縮放。在<head>標籤里加入這個meta標籤。
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 2.通過媒體查詢來設定樣式Media Queries
Media Queries 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的解析度小於980px，那麼可以這樣寫:
// 這裡面的樣式會覆蓋掉之前所定義的樣式
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}3.設定多種檢視寬度
假如我們要相容ipad和iphone檢視，我們可以這樣設定：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){} 4.字型設定
到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通網站上是Ok的，但是我們仍然需要響應式字型。一個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。
css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。rem是相對於根元素的，不要忘記重置根元素字型大小：
html{font-size:100%;}
完成後，你可以定義響應式字型：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}} 5.注意事項
寬度需要使用百分比
#head { width: 100% }
#content { width: 50%; }處理圖片縮放的方法
給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小；假如圖片小了，就原尺寸輸出:
img{width: auto;max-width:100%; }用::before和::after偽元素 +content 屬性來動態顯示一些內容。在css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能。
// HTML 結構
<img src="image.jpg"
>600px="image-600px.jpg"
>800px="image-800px.jpg"
alt="">
// CSS 控制：
@media (min-device-width:600px) {
img[>600px] {
content: attr(>600px, url);
}
}
@media (min-device-width:800px) {
img[>800px] {
content: attr(>800px, url);
}
} 除了img標籤的圖片外我們經常會遇到背景圖片，比如logo為背景圖片：
#log a{
display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
// background-size是css3的新屬性，用於設定背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width，第2個值用於指定背景圖的height，如果只指定一個值，那麼另一個值預設為auto。
// background-size:cover; 等比擴充套件圖片來填滿元素
// background-size:contain; 等比縮小圖片來適應元素的尺寸廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
其他屬性
例如 pre ，iframe，video 等，都需要和img一樣控制好寬度。對於table，建議不要增加 padding 屬性，低解析度下使用內容居中：
tableth,tabletd{padding:00;text-align: center; }