響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
優點：
面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點：
相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
響應式不同裝置平台 之間設計的順序
pc 1920*1080 筆記本1366*768 平板1024*768 手機 320*480
不同裝置設計順序優先順序
1. 使用者群佔主導，客戶使用裝置占有比大的人群優先
2. 客戶使用裝置佔比平均從大屏做到小屏做減法，比做加法容易一些。
在不改變內容的情況下，改變頁面的布局以精確適應不同的裝置，以此加強體驗。
網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
min-width 最小寬度
min-width:1000px 表示大於1000px寬度
max-width
max-width:500px 表示小於500px寬度
媒介查詢的使用方法
一、引用不同的樣式表
media屬性
**型別：
all 所有裝置（預設為all）
screen 電腦顯示器
handheld便攜裝置
tv電視型別裝置
print列印用紙列印預覽檢視
判斷條件
例如: min-width:1000px
media=」 (判斷條件)」 media=」(min-width:1000px)」
通過設定螢幕的判斷條件，呼叫對應的css檔案。該例項多用於整頁面不同風格的css呼叫與選取，使用該方法可能需要為乙個頁面製作多份個css檔案。
二、執行不同的css樣式屬性
@media (min-width:1000px){
大於1000px時的樣式
@media (max-width:1000px) and (min-width:500px){
500-1000解析度時的樣式
@media (max-width:1000px){
小於500px時的樣式
HTML5 CSS3移動端響應式網頁製作
1.響應式可以簡單理解為 能夠適應所有的裝置螢幕 2.h5相較於xhtml增強了語義化。3.box sizing border box 內減模式 4.固比的布局，固定的模組要用絕對定位的方式將其固定住。5.陰影屬性 box shadow 水平陰影的位置 垂直陰影的位置 模糊羽化 陰影的尺寸 陰影的顏...
HTML5 CSS3樣式 屬性
href 路徑 src 路徑 標籤的屬性 border 邊框 cellspacing 外邊距 cellpadding 內邊距 align 位置 bgcolor 背景色 background 背景 bordercolor 邊框顏色 table中 colspan 跨2列 rowspan 跨 行 type...
HTML5 CSS3實現的響應式垂直時間軸
網頁時間軸一般用於展示以時間為主線的事件，如企業 常見的公司發展歷程等。本文將給大家介紹一款基於html5和css3的漂亮的垂直時間軸，它可以響應頁面布局，適用於html5開發的pc和移動手機web應用。檢視演示 html 我們使用了html5標籤，時間軸中所有的內容包括標題 簡介 時間和影象都放在...