移動端VW+rem適配

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

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

html{
  font-size:26.67vw
}

(2)750spa

html{
 font-size:13.34vw
}

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

設計稿 375
image.png設計

html
image.pngcode

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

相關文章
相關標籤/搜索