博客 / 詳情

返回

移動端VW適配

移動端適配方案有很多種,都各有千秋,這裏我只介紹vw+rem適配方案

先簡單粗暴上方案:
1、設置meta
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
2、UI設計稿尺寸
(1)375

html{
  font-size:26.67vw
}

(2)750

html{
 font-size:13.34vw
}

沒錯,其實就是(100/設計稿尺寸)*100 =html font-size+vw
3、所有元素在設計稿上的尺寸除以100單位為rem
例:

設計稿 375
image.png

html
image.png

元素font-size:14px 寫0.14rem,發現計算出來字體在375尺寸下就是非常接近14px
image.png

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.