失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 移动端适配单位vw和px的转换

移动端适配单位vw和px的转换

时间:2019-07-04 12:07:34

相关推荐

移动端适配单位vw和px的转换

px是固定的大小单位

而vw是根据设备的大小来划分的单位

1vw=1%窗口宽度(也就是窗口宽度是100vw)

以固定宽度750px为例进行计算:

一、vw、px、rem换算(1rem = 100px):(谷歌,火狐,IE、uc、qq浏览器适用)

已知:750px = 100vw

计算:1px = (100vw / 750px) = 0.1333vw

定义:1rem = 100px (也就是1px = 0.01rem)

那么:1rem = 0.1333vw * 100 = 13.33vw (设置:根标签html字体为100px:font-size = 13.33vw)

换算:1rem = 100px = 13.33vw

1px = 0.01rem = 0.1333vw

示例:16px = 0.01rem * 16 = 0.16rem

二、也可以这样换算(1rem = 1px):(谷歌,火狐,IE适用,uc、qq浏览器不适用)

已知:750px = 100vw

计算:1px = (100vw / 750px) = 0.1333vw

定义:1rem = 1px (也就是1px = 1rem)

那么:1rem = 0.1333vw (设置:html的根元素设置为1px:font-size = 0.1333vw)

换算:1rem = 1px = 0.1333vw

1px = 1rem = 0.1333vw

示例:16px = 16rem

如果觉得《移动端适配单位vw和px的转换》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。