自適應方案

整理了各種用過的看過的自適應方案，列出了每乙個的優缺點，根據情況自行選擇，廢話不多說，直接開始啦！

注意：各種容器和盒子能用內容撐開的就用內容撐開，有固定寬高的話使用rem單位，配合**查詢可以使容器大小根據頁面大小自適應。最後給最外層容器新增 *margin: 0 auto;*達到頁面始終居中的效果。

·優點：可以較好適應放大縮小並且不出現橫向滾動條，盒子內容物可以同時自適應。

·缺點：每次寫都要記得引入這個檔案，有點長:d

@media screen and (
min-width
: 500px) }
@media screen and (
min-width
: 600px) }
@media screen and (
min-width
: 760px) }
@media screen and (
min-width
: 775px) }
@media screen and (
min-width
: 800px) }
@media screen and (
min-width
: 825px) }
@media screen and (
min-width
: 850px) }
@media screen and (
min-width
: 860px) }
@media screen and (
min-width
: 875px) }
@media screen and (
min-width
: 900px) }
@media screen and (
min-width
: 925px) }
@media screen and (
min-width
: 950px) }
@media screen and (
min-width
: 960px) }
@media screen and (
min-width
: 975px) }
@media screen and (
min-width
: 1000px) }
@media screen and (
min-width
: 1025px) }
@media screen and (
min-width
: 1050px) }
@media screen and (
min-width
: 1075px) }
@media screen and (
min-width
: 1100px) }
@media screen and (
min-width
: 1125px) }
@media screen and (
min-width
: 1150px) }
@media screen and (
min-width
: 1175px) }
@media screen and (
min-width
: 1200px) }
@media screen and (
min-width
: 1225px) }
@media screen and (
min-width
: 1250px) }
@media screen and (
min-width
: 1275px) }
@media screen and (
min-width
: 1300px) }
@media screen and (
min-width
: 1325px) }
@media screen and (
min-width
: 1350px) }
@media screen and (
min-width
: 1375px) }
@media screen and (
min-width
: 1400px) }
@media screen and (
min-width
: 1425px) }
@media screen and (
min-width
: 1450px) }
@media screen and (
min-width
: 1475px) }
@media screen and (
min-width
: 1500px)
}

vh+vw

vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。

所以當我們的頁面背景不是很在乎比例問題（如星空海洋），每乙個頁面都可以使用100vh,100vw達到始終覆蓋整個可視區的效果。

優點：簡單方便

缺點：適用範圍小，不適用於比例固定的地方

js resize事件

利用jsresize事件，每次調整視窗大小都可以觸發這個事件，然後在事件裡面再對頁面寬高進行相應設定即可，較之於vh和vw多了一些可以自己定義的東西，不會當頁面寬高比例發生變化時，頁面比例也發生變化。

·優點：可以適應螢幕寬高的變化。

·缺點：盒子裡面的內容比較難做到自適應。

不管使用以上哪種方法，都建議不要將寬高寫死，以及盡量使用彈性盒子

最後：在網頁的頭部可以插入以下**，可以幫助自適應更好的實現。

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

width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。

height：和 width 相對應，指定高度。

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

maximum-scale：允許使用者縮放到的最大比例。

minimum-scale：允許使用者縮放到的最小比例。

user-scalable：使用者是否可以手動縮放

自適應方案

HTML 自適應方案

自適應流控方案

rem絕對自適應方案

自適應方案

HTML 自適應方案

自適應流控方案

rem絕對自適應方案

相關推薦