一.使用html中的viewport來實現
viewport語法如下：
html**
（1）width
控制 viewport 的大小，可以指定的乙個值或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的
css 的畫素）。
（2）height
和 width 相對應，指定高度。
（3）initial-scale
初始縮放。即頁面初始縮放程度。這是乙個浮點值，是頁面大小的乙個乘數。例如，如果你設定初始縮放為「1.0」，那
麼，web頁面在展現的時候就會以target density解析度的1:1來展現。如果你設定為「2.0」，那麼這個頁面就會放大為
2倍。
（4）maximum-scale
最大縮放。即允許的最大縮放程度。這也是乙個浮點值，用以指出頁面大小與螢幕大小相比的最大乘數。例如，如果你
將這個值設定為「2.0」，那麼這個頁面與target size相比，最多能放大2倍。
（5）user-scalable
使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變，反之為no。預設值是yes
。如果你將其設定為no，那麼minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。
(6)設定螢幕寬度為裝置寬度，禁止使用者手動調整縮放)
html**：
(7)設定螢幕密度為高頻，中頻，低頻自動縮放，禁止使用者手動調整縮放)
html**:
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
注：1). 所有的縮放值都必須在0.01–10的範圍之內。
2). minimum-scale、maximum-scale要麼寫值，要不留這兩個
二.不使用絕對寬度
由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素 。這一條非常
重要。
具體說，css**不能指定畫素寬度：
width:*** px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
三.css的@media規則
（1） 同乙個css檔案中，也可以根據不同的螢幕解析度，選擇應用不同的css規則。
html**
@media screen and (max-device-width: 400px)
#sidebar
}
上面的**意思是，如果螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節 （width:auto），sidebar塊不顯示（display:none）。
（2）media查詢特性：
width 視口寬度
height 視口高度
device-width 裝置螢幕的寬度
device-height 裝置螢幕的高度
orientation 檢測螢幕處於橫屏還是豎屏
aspect-ratio 基於視口的寬高比例
device-aspect-ratio 基於裝置螢幕的寬高比
color 顏色的位數，如min-color：32 匹配裝置是否有32位或以上的顏色
color-index 裝置的顏色索引表中的顏色數
monochrome 檢測單色振緩衝區中每畫素使用的位數。為非負數，如monochrome：3
resolution 檢測螢幕或印表機的解析度，如min-resolution：300dpi(dpi後面會介紹)，也可以是每厘公尺畫素點的度量值，如min-resolution：120dpcm
scan 掃瞄方式，值為progressive(逐行掃瞄)、interlace(隔行掃瞄)
grid 檢測輸出裝置是網格裝置還是位圖裝置
（3）針對不同解析度：
中解析度螢幕 ：@media(-webkit-min-device-pixel-ratio:1)
高解析度螢幕 ：@media(-webkit-min-device-pixel-ratio:1.5)
超高解析度螢幕 ：@media(-webkit-min-device-pixel-ratio:2)
四．流動布局
各個區塊的位置都是浮動的，不是固定不變的。
html**
.main
.leftbar
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會 在水平方向
overflow（溢位），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
五. 的自適應
的寬度和高度要按百分比來設定，千萬不可以設定成固定大小。
html**
六.css3的新屬性: display：-webkit-box
(1)屬性：
webkit-box-orient：子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中預設值是inline-axis，即橫向排列
-webkit-box-flex ：子元素之間比例，僅作乙個係數
-webkit-box-direction ：子元素排列順序 normal | reverse | inherit，其中預設值是normal
-webkit-box-flex-group ：以組為單位的流體係數
-webkit-box-ordinal-group ：以組為單位的子元素排列方向
-webkit-box-lines： 子元素是否換行，類似word-wrap和word-break的作用
-webkit-box-align ：子元素垂直方向的對其方式
-webkit-box-pack ：子元素水平方向的對其方式
（2）例子：父元素被1、2、3均分，且2和1之間間隔10px
html:
css:
怎麼理解上面的**呢，父親有一塊地，要分給兄弟幾個，除去老大和老二之間的分割線所佔的那塊，剩下的部分均分的分數由li的兄弟個數和box-flex的總數確定，現在一共三兄弟，每兄弟的box-flex都是1，所以就總分數=1*1+1*1+1*1=3.
如果**稍作修改:
那麼現在老二的box-flex是2了，總分數就是1*1+1*2+1*1=4，其中老大老三各佔乙份，老二佔兩份，顯示效果如下：
-webkit-text-size-adjust:none
設定在螢幕橫屏的時候字型不自動變大
字級單位：rem
我們之前用em、百分比的時候遇到的問題就是計算，而且當巢狀的層級太多時就會非常難以把控，而用px則被固定死了，
現在我們用rem完全不用擔心這個問題，因為rem的參照物件只有根節點。我們只需設定根節點的大小，所有子節點都只需參照它來設計就可以，下面是px、em、百分比和pt的對比
我們只需設定html根元素字型大小為75%，對應的px值就是12，這樣我們可以很方便的設定頁面的寬高和字型大小，當然單位是rem，這樣參考物件才會永遠是html而不是父元素，當需要變化的時候，只需改變html的大小其他的元素都會相應變化，方便極了。
px,em,rem的區別
px特點
1. ie無法調整那些使用px作為單位的字型大小；
2. 國外的大部分**能夠調整的原因在於其使用了em或rem作為字型單位；
3. firefox能夠調整px和em，rem，但是96%以上的中國網民使用ie瀏覽器(或核心)。
px畫素（pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。
em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
em特點：
1. em的值並不是固定的；
2. em會繼承父級元素的字型大小。
比如說你在#content中宣告了字型大小為1.2em，那麼在宣告其子元素p的字型大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字型高而變為了1em=12px。避免1.2*1.2 = 1.44
rem特點
使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素
它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。
-webkit-box-sizing:border-box: 指定該盒子的大小包括邊框的寬度
當我們指定了乙個塊級元素時，並且為其定義了邊框，設定了其寬度為100%。按照盒子模型，就會發現該元素的左右邊框各1個畫素會溢了，導致出現橫向滾動條，這時候我們可以為其新增-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。
css 響應式布局
響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...
CSS 響應式布局
學的太不仔細了，仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表，media是css才有的屬性，只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...