rem与em的区别||结合使用rem与em
程序员文章站
2022-04-25 09:45:49
...
注意:谷歌浏览器最低支持的font-size为12px;
火狐和ie浏览器没限制
rem:
作用:适用不同分辨率的页面
相对于根元素html;给html设定一个font-size;所有元素的长度单位都用rem(倍数关系),若html设定的font-size:10px;那么2rem就是20px;
好处:不同分辨率,只需要改变根元素html的font-size即可改变所有子元素的大小,且相对格局不变
em:
相对于父元素;给父元素设定font-size;该父元素下的所有子元素可以以em为单位来设置大小。
若父元素的font-size:10px;子元素设置2em即为20px;
页面布局中一般将rem和em结合
html{
font-size:10px
}
div{
width:10rem;//100px
height:10rem;//100px
//若不设置font-size则默认为html的10px
font-size :1.6rem//16px
}
div a{
font-size:2em//2倍父元素div的font-size的大小 32px
}
上一篇: 一些DOM中的理解
下一篇: 2、Android开发初体验