一、什麼是響應式布局?
響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。
這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用大勢所趨來形容也不為過。
隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點：相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
1、 如何解決不同裝置間的相容問題？
css3中的media query（媒介查詢）可以解決這個問題。
2、media query能夠獲取哪些值?
裝置的寬和高device-width，device-heigth顯示螢幕/觸覺裝置。
渲染視窗的寬和高width，heigth顯示螢幕/觸覺裝置。
裝置的手持方向，橫向還是豎向orientation(portrait|lanscape)和印表機等。
畫面比例aspect-ratio點陣印表機等。
裝置比例device-aspect-ratio-點陣印表機等。
物件顏色或顏色列表color，color-index顯示螢幕。
裝置的解析度resolution
3、語法結構及用法
語法：@media 裝置名 only (選取條件) not (選取條件) and(裝置選取條件)，裝置二
用法：a、示例一：在link中使用@media：
上面使用中only可省略，限定於計算機顯示器，第乙個條件max-width是指渲染介面最大寬度，第二個條件max-device-width是指裝置最大寬度。
b、在樣式表中內嵌@media：
@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait)
設定了電腦顯示器解析度（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持裝置；
屏寬大於或等於480px小於1024px以及 垂直放置裝置的css樣式。
四、實現響應式布局
html5 響應式布局示例
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個 概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕 移動裝置的普及，用 ...
初學HTML5 響應式柵格系統
在網頁製作中，柵格系統就是用固定的格仔進行網頁布局，是一種清晰，工整的設計風格 display用於指定彈性盒的容器，其值可以為flex 如果為行內元素，值為inline flex.flex flow是屬性flex direction和flex wrap的簡寫，用於排列彈性子元素。flex direc...
px單位html5響應式方案
移動端h5響應式方案最近這幾年用得最多的最多的就是rem方案了。這個需要計算根元素的font size來實現響應式。但這種方案也有乙個缺點，那就是font size不為整數的時候一些字型使用rem單位會導致字型顯示的有問題比如字型會產生鋸齒，對視覺還原要求比較高的專案來說這還是令前端開發挺頭疼的一件...