码迷,mamicode.com
首页 > 其他好文 > 详细

rem布局

时间:2019-02-18 16:12:23      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:逻辑   样式   单位   元素   str   物理   字体大小   rem   bsp   

1..移动端布局
 
    dpr 设备像素比
 
    dpr = 物理像素 / 逻辑像素
 
    物理像素:设计图的宽或者高
    逻辑像素:开发者代码中写的宽,高
 
设计图:750px /640px      dpr=2
 
 
2.rem是相对于根元素的字体大小的单位,能等比例适配所有的屏幕,根据html的字体的大小来控制rem的大小
 
如果设计图为 640px
根元素font-size=31.25vw 相当于100px,相当于 1rem
 
如果设计图为750px
根元素font-size=26.67vw 相当于100px,相当于 1rem
 
一般,我们要在公共样式中根据设计图的大小,设置根元素字体的大小,单位为vm,
如果设计图为640px,html{font-size:31.25vw}
如果设计图为750px,html{font-size:26.67vw}
 
然后,我们量取得px/2/100即:物理像素/2/100
 
 
 
 
 
 
 

 

rem布局

标签:逻辑   样式   单位   元素   str   物理   字体大小   rem   bsp   

原文地址:https://www.cnblogs.com/SRH151219/p/10396044.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!