布局方式

1. 固定布局

2. 流式布局：流式布局是以百分比作為單位的屎慢，我們要牢記如下公式：
   百分比寬度 = 目標(biāo)元素寬度 / 上下文元素寬度
   這種布局優(yōu)點：可以自適應(yīng)布局鸦致，根據(jù)不同的分辨率顯示不同的寬度。
   缺點：在行高或者marginTop在大屏幕下看起來太高锭碳，在小屏幕下看起來太窄袁稽。

3 彈性布局：彈性布局是以em作為單位的，同樣彈性布局也支持如下公式：
百分比尺寸 = 目標(biāo)元素尺寸 / 上下文元素尺寸
使用em將文字像素px轉(zhuǎn)換為相對單位擒抛，現(xiàn)在瀏覽器默認(rèn)文字的大小是16px推汽，如果一個文字大小是48px，上下文元素是(瀏覽器)闻葵，那么轉(zhuǎn)換成em 就是 48/16 = 3em. 但是如果一個h1標(biāo)簽的font-size是48px, h1標(biāo)簽內(nèi)部span標(biāo)簽font-size 是24px,那么h1標(biāo)簽的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.彈性布局也支持響應(yīng)性web設(shè)計民泵。

媒體查詢

@media 設(shè)備類型 and (設(shè)備特性-寬度) {
     // css 樣式
}

可以指定的值 含義

all 所有設(shè)備
screen 顯示器
print 打印用紙或打印預(yù)覽視圖
handled 便攜設(shè)備
tv 電視機(jī)類型的設(shè)備
speech 語音和音頻合成器
braille 盲人用點字法觸覺回饋設(shè)備
embossed 盲人打印機(jī)
projection 各種投影設(shè)備
tty 使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端

Css設(shè)備特性共有13種槽畔，是一個類似于CSS屬性的集合栈妆。但與CSS屬性不同的是，大部分設(shè)備特性的指定值接受min/max的前綴厢钧，用來表示大于等于或小于等于的邏輯鳞尔，以此避免使用<和>這些字符。

image.png

1. 最大寬度960px一種布局：
   @media screen and (max-width:960px) {<=960}

2. 最小寬度600px 另一種布局：
   @media screen and (min-width:600px) {>=600}

3. 寬度在600px 到 960px之間早直，如下:
   @media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

4.外聯(lián)樣式使用link標(biāo)簽來引用樣式：
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
<link rel=”stylesheet” href=”xx2.css” media=”screen and (min-width:600px)”/>
<link rel=”stylesheet” href=”xx3.css” media=”screen and (min-width:600px) and (max-width):960px”/>
如果對于像ipad來說寥假，我們可以在上面增加一個屬性 orientation(landscape或portrait) 橫屏或者豎屏。

做h5頁面移動端開發(fā)需要在head標(biāo)簽內(nèi)引入下面這句話霞扬。（如果沒有引入的話糕韧，頁面的字體等大小就不正常了）。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
具體含義如下：
Width: 控制viewport的大小喻圃。如device-width為設(shè)備的寬度萤彩。
initial-scale: 初始縮放比例，頁面第一次加載時的縮放比例斧拍。
maximum-scale 允許用戶縮放到的最大比例雀扶，范圍從0到10.0
minimum-scale: 允許用戶縮放到的最小比例，范圍從0到10.0
user-scalable： 用戶是否可以手動縮放肆汹，值可以是:
1愚墓， yes,true允許用戶縮放予权；
2, no、false不允許用戶縮放浪册。 (只設(shè)置這一個屬性扫腺，有的瀏覽器并不生效，我們需要配合maxinum-scale和mininum-scale最大縮放與最小縮放分別為1:1)议经。

綜合：流式布局和彈性布局及配合媒體查詢 是 響應(yīng)性布局的最好方式斧账。

圖片

1. 對于背景圖片來說谴返，css3有個屬性 background-size可以等比例縮放背景圖片煞肾。
   但是對于小屏幕的移動設(shè)備去加載大背景圖片的話，有缺點的嗓袱，最主要的缺點是要更大的帶寬籍救，浪費流量。所以我們要想做的更好的話渠抹，可以使用媒體查詢根據(jù)設(shè)備的寬度來渲染不同大小的背景圖片蝙昙。
2. 對于頁面上的<img/>標(biāo)簽圖片的話：
   2.1. 如果只是頁面上靜態(tài)圖片的話，不考慮帶寬的情況下梧却，可以使用width=100%”等比例縮放奇颠，如：<img src=”XX.png” width=”100%”/>
   2.2. 如果是商品圖或者頁面上有多個的話，考慮不浪費不必要的帶寬放航，需要后臺根據(jù)不同的設(shè)備寬度大小來返回不同的json數(shù)據(jù)的圖片來給我們前端烈拒，之后我們前端使用JS動態(tài)的渲染出來。
   在現(xiàn)代瀏覽器中（包括IE8+）中要實現(xiàn)圖片隨著流動布局相應(yīng)縮放非常簡單广鳍，只需要在css中加上這么一句代碼：
   img { max-width:100%; }
   含義是：確保圖片的最大寬度不會超過瀏覽器的窗口或其容器可視部分的寬度荆几，所以當(dāng)窗口或容器的可視部分變窄時，圖片的最大寬度值也會相應(yīng)的變小赊时，圖片本身永遠(yuǎn)不會覆蓋容器吨铸。

css單位px，em祖秒，rem的區(qū)別

1. Px是css中最基本的長度單位诞吱，在PC端，設(shè)計稿多少像素竭缝，頁面css就寫多少像素房维。

2. em 是相對單位，相對于上下文元素而言歌馍，一般情況下握巢，瀏覽器默認(rèn)的字體大小是16px，也就是1em等于16px；比如：

3. rem也是相對單位照藻。rem是相對于html根元素來計算的送巡，這就是說只要在根節(jié)點設(shè)定好參考值潮尝，那么全篇的1rem都相等矮燎，計算方式同 em坑匠，默認(rèn)1rem=16px; 同理你可以 設(shè)定html { font-size:62.5% } 那么1rem就等于10px郁油，以此類推缩膝。独撇。屑墨。
   比如設(shè)置html根元素 如下代碼：
   html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
   當(dāng)一個p元素是24px的話，那么轉(zhuǎn)換成rem為單位的話纷铣，那么只需要如下這樣寫即可：
   p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
@media (min-width:1000) {}內(nèi)字體大小希望可以寫2個卵史，font-size:24px;font-size:2.4rem,這是為了未來的移動設(shè)備獨立像素超過1000后能使用rem作單位。

元素未知寬度居中

第一種方法：
假如頁面html結(jié)構(gòu)如下：

<p>What is CSS?</p>
</div>

只需要給父級元素div 設(shè)置 文本對齊是 居中對齊搜立。子元素設(shè)定display:inline-block即可以躯。如下代碼：

div{text-align:center}
p{display:inline-block}

第二種方法如下：

div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}

響應(yīng)式web設(shè)計如何實踐

1. 首先需要在頁面頭部引入這行meta代碼，如下：
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />
   還要引入這一句：
   <meta content="telephone=no,email=no" name="format-detection" />
   我們的代碼有類似于電話這樣的數(shù)字的時候啄踊，因為有的手機(jī)上它會自動轉(zhuǎn)換成可以撥打電話忧设，所以我們加上這句就不會了。

2. 響應(yīng)性web設(shè)計需要使用css3媒體查詢media來寫不同的css樣式颠通。
   在移動端瀏覽器中或者某些桌面瀏覽器中址晕，window對象有一個devicePixelRatio屬性，它的官方定義為顿锰，設(shè)備的物理像素與設(shè)備的獨立像素的比例谨垃，也就是 devicePixelRatio = 設(shè)備的物理像素/ 設(shè)備的獨立像素。這三個參數(shù)不是固定的撵儿，只要其中2個確定了乘客，那么就可以知道第三個參數(shù)了，設(shè)備的物理像素我們可以映射到設(shè)備的分辨率的寬度淀歇，獨立像素我們可以映射到媒體查詢media定義的寬度易核。而比列devicePixelRatio我們可以理解為css中的1像素(px)在設(shè)備上占用多少個物理像素。比如我們目前常見的手機(jī)分辨率如下：

   
   
   image.png
   
   

   如上小米3分辨率為1080浪默，獨立像素為360px牡直，那么比列為3，也就是一個css的1px纳决，占用3個物理像素碰逸，小米2和紅米Note分辨率為720，獨立像素還是360px阔加，所以比列為2饵史，所以小米3相對于小米2與紅米Note更清晰。同理iphone和其他類型的手機(jī)也一樣。

而上面說的獨立像素就是360px胳喷，正是我們css中的媒體查詢關(guān)聯(lián)的湃番。
針對手機(jī)屏幕的寬度是360 384等屏幕的寬度
width(寬度可以設(shè)置為384px) max-width:384來計算 但是邊距 字體大小等還是按照360px來計算
@media (min-width:360px) and (max-width: 399px) {}

我們都知道在IE6-8下 IE是不支持css3中的媒體查詢的，只需要在網(wǎng)上下載 respond.js下來放到我們本地吭露，然后頁面上引入即可吠撮。respond.js的github地址如下：
https://github.com/scottjehl/Respond/