首先，什麼是響應式布局呢？
響應式布局是2023年5月提出的乙個概念，簡單地說就是乙個**能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。
優點：1.面對不同解析度裝置靈活性強
2.能夠方便的解決多裝置顯示適應問題
缺點：1.相容各種裝置工作量大，效率低下。
2.**累贅，會出現隱藏性沒有用的元素，載入時間長
大家先來了解一下css3 中的media query:
（一）簡單的響應式了解
效果展現如下：
a.瀏覽器視窗寬度大於640px（為792px：）
b.瀏覽器視窗寬度小於640px（為574px）
（二）乙個稍微複雜的例項
各個div顏色自己設定，在此不再多說，只展示一下@media 的部分
a.瀏覽器視窗寬度大於960px時，下面的圖進行了縮小：
b.瀏覽器視窗寬度小於960px大於600px時，下面的圖進行了縮小：
c.瀏覽器視窗寬度小於600px時，下面的圖進行了縮小：
注：低端瀏覽器不支援css3,用js實現。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
什麼是響應式？響應式 web 設計是乙個讓使用者通過各種尺寸的裝置瀏覽 獲得良好的視覺效果的方法。實現 charset utf 8 name viewport content width device width,initial scale 1.0 1 1縮放使用 查詢 查詢可以被用在css中的 m...