区别:
相同点:二者都是相对单位
不同点:rem(font size of the root element)是指相对于根元素的字体大小的单位,
em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依
赖根元素一个是依赖父元素计算。
px:常用单位px,它是一个绝对单位
rem的使用------>rem能等比例适配所有屏幕
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测试rem和em单位</title>
</head>
<style type="text/css">
@media(max-width: 1930px){
html{
background: #ddd;
font-size: 16px;
}
}
@media(max-width: 7681px) and (min-width:1930px){
html{
background: #fff;
font-size:160px;
}
}
h4{
font-size:1.25rem;
}
td{
font-size:1.5rem;
}
</style>
<body border=1 style="border:1px solid red;">
<h4>测试</h4>
<table border="1" width="100%">
<tr>
<td width=33%>你好吗</td>
<td width=33%>我叫小明</td>
<td width=33%>我家住在山个牢牢</td>
</tr>
</table>
</body>
</html>
此处,代码使用rem,说明是相对于根目录的相对单位,在此实例中,则是相当于<html>标签。大多数人可能会以为<body>标签也是根目录了。但是是实例中,如果是相当于body,则无法达到应有的效果
如图,在iPhone X 375*812尺寸下,满足@media(max-width: 1930px),所以width为16px.
<h4>标签,font-size:1.25rem,则为1.25*16px=20px
<td>标签,font-size:1.5rem,则为1.5*16px=24px
em的使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测试部分(runoob.com)</title>
</head>
<style type="text/css">
@media(max-width: 1930px){
html{
font-size:20px;
}
body{
background: #ddd;
font-size: 16px;
}
}
@media(max-width: 7681px) and (min-width:1930px){
html{
font-size:20px;
}
body{
background: #fff;
font-size:160px;
}
}
h4{
font-size:1.25em;
}
td{
font-size:1.5em;
}
</style>
<body border=1 style="border:1px solid red;">
<h4>测试</h4>
<table border="1" width="100%">
<tr>
<td width=33%>你好吗</td>
<td width=33%>我叫小明</td>
<td width=33%>我家住在山个牢牢</td>
</tr>
</table>
</body>
</html>
此处,代码使用em,说明是相对于父目录的相对单位,只要是父级目录即可。在如图代码中<tr><table><body>啥的都可以作为父级目录,此处要把腹肌目录和根目录区别清楚。
如图,在iPhone X 375*812尺寸下,满足@media(max-width: 1930px),此处设置了<html>是font-size:20px,<body>是font-size:16px,按上一段话,所说,此处应该是16px,应为<h4>和<td>标签最近的父元素就是<body>,所以width为16px.此处目前为16px
<h4>标签,font-size:1.25em,则为1.25*16px=20px
<td>标签,font-size:1.5em,则为1.5*16px=24px
如果把body元素的去掉,则此处会直接继承到<html>的属性,font-size将为20px。可以自行测试
---->如有疑问,请发表评论,或者联系博主:lzb348110175@163.com,欢迎哦^_^