利用 media screen實現網頁布局的自適應

經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼，可以利用@media screen實現網頁布局的自適應。

優點：無需外掛程式和手機主題，對移動裝置友好，能夠適應各種視窗大小，

只需在css中新增@media screen屬性，根據瀏覽器寬度判斷並輸出不同的長寬值。

以下是針對自用主題而寫的css，對寬度768以下裝置只保留主要文章框架，以便在有限的空間裡獲得最佳閱讀體驗。

@media screen and(min-width:1200px)

#content,.div1

#secondary

}@media screen and(min-width:960px)and(max-width:1199px)

#content,.div1

#secondary

select

}@media screen and(min-width:768px)and(max-width:959px)

#content,.div1

#secondary

select

}@media only screen and(min-width:480px)and(max-width:767px)

#content,.div1

#secondary

#access

#accessa

#accessaimg

#rss

#branding#s

}@media only screen and(max-width:479px)

#content,.div1

}

利用 media screen實現網頁布局的自適應

經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼,可以利用 media screen實現網頁布局的自適應,優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小 只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 media screen and m...

利用 media screen實現網頁布局的自適應

利用 media screen實現網頁布局的自適應 優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 1280解析度以上 大於1200px media screen and min width ...

利用 media screen實現網頁布局的自適應

優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 準備工作1 設定meta標籤 首先我們在使用media的時候需要先設定下面這段 來相容移動裝置的展示效果 這段 的幾個引數解釋 width de...