需要注意的問題
responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使**在手機和平板電腦上有更好的瀏覽閱讀體驗。例如，您先在計算機顯示器上瀏覽乙個**，然後在智慧型手機上瀏覽，智慧型手機的螢幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的使用者體驗幾乎一樣，這說明這個**在響應式設計方面做得很好。
大多數移動瀏覽器將html頁面放大為寬的檢視（viewport）以符合螢幕解析度。你可以使用檢視的meta標籤來進行重置。
下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽。
user-scalable屬性能夠解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。裝置型別(media type):
all所有裝置；
screen 電腦顯示器；
print列印用紙或列印預覽檢視；
handheld便攜裝置；
tv電視機型別的裝置；
speech語意和音訊盒成器；
braille盲人用點字法觸覺回饋裝置；
embossed盲文印表機；
projection各種投影裝置；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。
裝置特性(media feature):
width瀏覽器寬度；
height瀏覽器高度；
device-width裝置螢幕解析度的寬度值；
device-height裝置螢幕解析度的高度值；
orientation瀏覽器視窗的方向縱向還是橫向，當視窗的高度值大於等於寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，螢幕的縱橫比。
假如乙個終端的解析度小於980px，那麼可以這樣寫：
@media screen and (max-width:980px)
#content
#footer
}這裡面的樣式會覆蓋掉之前所定義的樣式。
/* for 240 px width screen */
@media only screen and (max-device-width:240px)
} /* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px)
} /* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px)
}
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
rem是相對於根元素的，不要忘記重置根元素字型大小：
html
完成後，你可以定義響應式字型：
@media (min-width:640px)}
@media (min-width:960px)}
@media (min-width:1200px)}
img頻寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的還是pc上的大圖；檔案體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那麼我們就得把也處理成響應式的根據終端型別尺寸解析度來適配出合理的圖形。
處理原理：瀏覽器獲取使用者終端的螢幕尺寸、解析度邏輯處理後輸出適應的，如螢幕解析度320*480，那麼我們匹配給它的是寬度應小於320px的。如果終端螢幕的dpi(device pixels)dpi詳解值很高，也就是高清屏，那麼我們就得輸出2倍解析度的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的螢幕引數可通過查詢。
在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 html 自定義屬性的功能： html 結構。css控制：
@media (min-device-width:600px)
}@media (min-device-width:800px)
}
寬度不固定，可以使用百分比#head
#content
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
js學習總結 響應式布局基礎
搭建h5頁面的時候，我們需要在head中新增乙個meta標籤 wb中輸入meta vp按下tab鍵自動生成 viewport 視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口的寬度是980px 通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少...