1. 響應式布局2. css3 **查詢
即media queries，可以針對不同的**型別定義不同的樣式，從而實現響應式布局 。也可以針對不同的解析度設定不同的樣式。
1024解析度以上：pc端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 橫屏
450解析度以下： mobile 豎屏
常見的**型別：
all 用於所有裝置
print 用於印表機和列印預覽。
screen 用於電腦螢幕，平板電腦，智慧型手機等。
speech 應用於螢幕閱讀器等發聲裝置。
@media all and (min-width:500px)
@media all and (min-width:500px) and (max-width:800px)
orientation:portrait : 豎屏
orientation:landscape : 橫屏
@media all and (orientation:portrait){}
注：這個橫豎屏操作，只是針對移動端的。在pc端螢幕永遠是豎屏的。
注：空格是需要新增的，要符合規範。
link的使用：
先去適配手機端 -> 過渡到pad -> 過渡到pc (不是很推薦)
先去適配pc端 -> 過渡到pad -> 過渡到手機端 (推薦的)
/* 正常的樣式 , 針對pc端的 */
100行css
/* 針對pad pro */
@media all and (max-width:1024px)
/* 針對pad mini 和 mobile 橫屏 */
@media all and (max-width:768px)
/* 針對 mobile 豎屏 */
@media all and (max-width:450px)
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...