1.rem和em单位的使用

区别:

相同点:二者都是相对单位

不同点:rem(font size of the root element)是指相对于根元素的字体大小的单位,

              em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依

       赖根元素一个是依赖父元素计算。

              px:常用单位px,它是一个绝对单位

rem的使用------>rem能等比例适配所有屏幕



	
		
		
		测试rem和em单位
	
	
	
		

测试

你好吗 我叫小明 我家住在山个牢牢

此处,代码使用rem,说明是相对于根目录的相对单位,在此实例中,则是相当于标签。大多数人可能会以为标签也是根目录了。但是是实例中,如果是相当于body,则无法达到应有的效果

如图,在iPhone X 375*812尺寸下,满足@media(max-width: 1930px),所以width为16px.

标签,font-size:1.25rem,则为1.25*16px=20px

标签,font-size:1.5rem,则为1.5*16px=24px

1.rem和em单位的使用_第1张图片

1.rem和em单位的使用_第2张图片

em的使用



	
		
		
		测试部分(runoob.com)
	
	
	
		

测试

你好吗 我叫小明 我家住在山个牢牢

此处,代码使用em,说明是相对于父目录的相对单位,只要是父级目录即可。在如图代码中

啥的都可以作为父级目录,此处要把腹肌目录和根目录区别清楚。

如图,在iPhone X 375*812尺寸下,满足@media(max-width: 1930px),此处设置了是font-size:20px,是font-size:16px,按上一段话,所说,此处应该是16px,应为

标签最近的父元素就是,所以width为16px.此处目前为16px

标签,font-size:1.25em,则为1.25*16px=20px

标签,font-size:1.5em,则为1.5*16px=24px

1.rem和em单位的使用_第3张图片

1.rem和em单位的使用_第4张图片

如果把body元素的去掉,则此处会直接继承到的属性,font-size将为20px。可以自行测试

---->如有疑问,请发表评论,或者联系博主:[email protected],欢迎哦^_^

 

你可能感兴趣的:(前端技术)