responsive設計最關注的就是寬度：根據使用者的使用裝置的當前寬度，你的web頁面將載入乙個備用的樣式，實現特定的頁面風格。
布局技巧（都是為了保持你的html簡單乾淨，在的關鍵部分（元素）不要過分的依賴現代技巧來實現，比如說css3特效或者js指令碼）：
丟去了一些對responsive有影響的細節：
盡量少用無關緊要的div
不使用內聯元素(inline)
盡量少用js或flash
丟去沒用的絕對定位和浮動樣式
屏棄任何冗餘結構和不使用100%設定
能幫助responsive確定更好的布局的內容：
使用html5 doctype和相關指南
重置好你的樣式（reset.css）
乙個簡單的有語義的核心布局
給重要的網頁元素使用簡單的技巧，比如導航選單之類元素
測試html結構是否簡單乾淨的方法：
禁掉所有樣式，看頁面是否內容排列有序，方便閱讀。
定義斷點，即裝置寬度的臨界點。也就是前面大家比較關心的medial queries中的min-width和max-width值是什麼？常見的斷點有六種：
<480 <768 <320 <768-1024 >1024
第乙個斷點群體就是針對於智慧型手機設定，他的寬度是小於480px
第二個斷點是高智慧型移動裝置，比如說ipads裝置，他的寬度是小於768px
第三個斷點就是針對於大裝置，比如說pc端，他的寬度是大於768px(>768px)
更細分一些：
新增乙個小於320px的斷點，針對於小型的移動裝置；
還可以新增適用於平板裝置的斷點，大於768px小於1024px
最後還可以為超寬的桌面設定乙個斷點，大於1024px(>1024px
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...