关于em rem px等单位之间的转换

最新推荐文章于 2023-05-25 22:05:54 发布

Lioo121

最新推荐文章于 2023-05-25 22:05:54 发布

阅读量558

点赞数

文章标签： rem em px

本文链接：https://blog.csdn.net/Lioo121/article/details/102731253

版权

单位
绝对单位：尺寸固定不变的单位：px cm m
相对单位：大小由参考元素决定：一般都是相对父元素
百分比相对父元素
em 需要先设置font-size 他的值为参考单位

                默认 1em=16px  1em=font-size的值
                如果有font-size  那么其他属性中的1em=font-size的值
                通常用于设置文字大小；参考元素：font-size属性

              vw      视图窗口宽度
              最大宽度为100vw  =   视图窗口的宽度
              vh      视图窗口高度  最大高度  100vh = 视图窗口高度(尽量不要使用)
              rem     根元素html  1rem=16px 由html的font-size 大小决定 
              rpx     微信小程序

转换

    旧版本浏览器最小字符12px
   新版本  最小 9px
   旧版本：设置小于12px  1rem=12px
   新版本  1rem=10px

font-size: 10px; 
1rem = 2em =2*16px =32px 
 font-size: 2em; 
 1rem = 100/分辨率 *10 =？
font-size: 10vw; 


   0% 1rem=0 有高度占地 没高度不占地
   1%-99% 1rem=12px
   100% 1rem=16px
   200% 1rem=32px