CSS的px,em,rem

xiaoxiao2021-02-28  41

一、px,em,rem是什么?

px:像素,它是长度的相对单位,它是相对于与屏幕的分辨率而言的 em:是相对长度单位,相对参照物为父元素的font-size,em具有继承的特点,当没有设置font-size时,则会继承浏览器的默认设置1em = 16px rem: 相对参照物是根元素html,且是不变的,由于参照物的不变,所以比较好计算,当没有设置font-size时,浏览器会采用默认的16px

二、改变字体的大小

对于px来说,只要考虑自身的大小就行,需要多少直接设置就行

而对于em来说,要通过父元素的大小来计算得出,当整个网页字体需要统一变大变小的时候只需要改变body里面的font-size的值就行

1.2em = 父级字体的大小 * 1.2

对于rem来说,为了方便计算起见,可以把默认字体的大小设置为font-size: 62.5%或者font-size: 10px

比如说现在需要设置p的字体大小为30px,则可以先设置html{font-size: 62.5%}(则就说明此时1rem=10px),那么可以计算出30/10=3rem,然后设置p{font-size: 3rem}

三、选择合适的单位

对于只需要适配少部分的手机设备,且分辨率对页面影响不大的,使用px即可对于需要适配各种移动设备,使用rem,当然rem是存在兼容性的,所以可以这样写p{font-size: 30px; font-size: 3rem}
转载请注明原文地址: https://www.6miu.com/read-59683.html

最新回复(0)