移動端適配方案

2021-10-01 05:45:28 字數 910 閱讀 6270

尺寸：

超小屏：768以下；

小屏：768-992

中屏：992-1200

寬屏：1200以上；

適配方案

適配細節：

在網頁**的頭部，加入一行viewport元標籤。

viewport是網頁預設的寬度和高度，上面這行**的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

不使用絕對寬度px;

具體說，css**不能指定畫素寬度：

width:*** px;

只能指定百分比寬度：

width: xx%;

或者width:auto;

相對大小的字型 （不能用px,只能用相對大小em）

body
上面的**指定，字型大小是頁面預設大小的100%，即16畫素。

h1
然後，h1的大小是預設大小的1.5倍，即24畫素（24/16=1.5）。

small
small元素的大小是預設大小的0.875倍，即14畫素（14/16=0.875）。

imgimg, object
老版本的ie不支援max-width，所以只好寫成：

imgimg
或者，ethan marcotte的imgsizer.js。

addloadevent(function() );
不過，有條件的話，最好還是根據不同大小的螢幕，載入不同解析度的

移動端適配方案

最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...

移動端適配方案

先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...

移動端適配方案

具體實現 1先檢視設計稿的寬度，比如說750px的二倍設計稿，我們可以根據自己的實際情況分成10份 20份 1份就是html的font size的大小，他就是rem這個相對單位的基準值 分10份，1rem 75px 37.5px 2使用上一步的基準值,把設計稿中各元素的寬高，填充，間距，字型大小，這...