響應式布局的實現

響應式布局指的是同一頁面在不同螢幕尺寸或者在不同的裝置下有不同的布局，能夠在大屏裝置以及小屏裝置獲得更好的瀏覽體驗，簡單來說就是頁面適應終端而無需為每個終端製作單獨的頁面。

通過使用css**查詢來實現響應式布局，針對不同的**型別設定不同的樣式規則，可以根據視窗、裝置高度與寬度、裝置方向、解析度等進行不同css適配。


rel=
"stylesheet"
type
="text/css"
href
="example.css"
media
="all and (max-width:600px)"
/>


"t1"
>
div>
type
="text/css"
>
@media screen and (
min-width
:600px)
}@media screen and (
max-width
:600px) }
style
>

/* @import url("example.css") mediatype and|not|only (media feature); */
@import
url("example.css") all and (
max-width
:600px)
;

當度量單位設定為百分比時，即可使瀏覽器元件寬高隨著瀏覽器的大小相應變化。

em是相對長度單位，相對於當前物件內文字的字型尺寸，若未設定則相對於瀏覽器預設字型尺寸16px，em是會繼承父元素的字型的尺寸，使用時需要重新計算子元素的em值避免1.2*1.2=1.44的現象，使用em可以使元素根據字型大小的動態調整來製作響應式布局。

rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size相當於提供了乙個基準，當頁面的size發生變化時，只需要改變font-size的值，那麼以rem為固定單位的元素的大小也會發生相應的變化。因此，如果通過rem來實現響應式的布局，只需要根據檢視容器的大小，動態的改變根元素的font-size即可。

通過動態地控制網頁檢視的縮放比例來製作響應式布局。

name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0"
/>

自適應布局一般是通過檢測user-agent來判斷當前訪問的裝置是pc端還是平板或者是手機，或者是通過檢測視窗解析度而請求伺服器，從而服務端重定向或者返回不同的頁面，需要開發多個頁面來適應不同的裝置，通常自適應布局與響應式布局並不是單獨使用的，可以通過開發一套pc端頁面與一套移動端頁面來實現自適應布局，而兩套頁面都實現對於不同範圍解析度的響應式布局，可以避免過大的css樣式表又可以獲得較好的瀏覽體驗，

響應式布局的實現

實現響應式布局

響應式布局的實現

響應式布局 響應式布局技巧

相關推薦

響應式布局響應式布局技巧