###一 摘要
今天給大家總結一下css的響應式布局,首先我們還是先弄清楚,幾種布局的概念.特點:固定死的寬高,典型的應用靜態**
####2.自適應
特點:1)為不同螢幕定製不同的布局
2)在每個布局中頁面元素不隨著視窗的大小而改變
####3.流式布局
特點:1)只有一套布局
2)頁面元素隨著視窗的大小而改變
特點:1.為不同螢幕定義解析度不同的布局
2.在每個布局中,應用流式布局,頁面元素寬度隨著螢幕調整而自動適配.
下面我們來具體來講解一下響應式布局用法及特點.
####1.利用@media進行響應式布局設定
特點:根據不同的終端來呼叫對應得樣式,其中screen、all和print為最常見的三種**型別。handheld雖然是手持裝置，但是iphone,平板這些都是screen裝置。####利用@media具體設計原則
原理:**特性是通過min-width或max-width等來表示大於等於或小於做為邏輯判斷,看一下具體使用.這個**特性中最常用的乙個特性,指**型別小於或等於指定的寬度時，樣式生效.
那麼有最大寬度就有最小寬度了.**型別大於或等於指定的寬度時，樣式生效.
####多個**屬性的使用
####裝置螢幕的輸出寬度device-width
特點:根據螢幕裝置的尺寸來設定相應的樣式（或者呼叫相應外部的樣式檔案）.
對於螢幕裝置同樣可以使用「min-device-width」或者「max-device-width」對應引數
上面的**指的是「test.css」樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，這裡的「max-device-width」所指的是裝置的實際解析度，也就是指可視面積解析度。
上面**表示的是：樣式**將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。css3響應式布局
1 分界點 超小螢幕xs 移動裝置 768px以下 小屏裝置sm 768px 992px 中等螢幕md 992px 1200px 寬屏裝置lg 1200px以上 2 語法 media screen and max width 768px stylesheet href css a.css style...
響應式布局和css3
1.使用百分比 2.使用em，相對於上下文的百分比 body預設16px,100 1em body 子元素相對body的大小。比如寬度為48px,則設定 width 3em 3.查詢，比較常用的框架bootstrap.css 4.css3 text shadow 陰影 1px 1px 1px 000...
快速最好響應式布局（CSS3）
display flex 伸縮布局模式 給父級加 min width 盒子最小寬度 小於這個寬度，在縮小頁面，盒子不會縮小 max width 盒子最大寬度 大於這個寬度，在放大頁面盒子不會變大，放大的都是空白 flex direction row 預設 column 豎著劃分 justify co...