欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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
}

rem与em的区别||结合使用rem与em

相关标签: css基础知识 css