px em rem

2020-12-24 221 阅读2分钟

zhuanlan.zhihu.com/p/338518251…

px是固定单位，其他几种都是相对单位。当我们把电脑屏幕的分辨率调为1440*900时，css里设置的1px实际的物理尺寸就是屏幕宽度的1/1440。
小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 1280px。这个元素的实际占据的宽度和电脑屏幕宽度相同
em：默认字体大小的倍数。比如给元素设置font-size: 2em，这里的默认字体大小实际上是继承自父亲的大小，font-size: 2em表示当前元素字体大小是父亲的2倍。当给元素设置width: 2em，这里的默认字体大小是该元素自身的实际字体大小
em会继承父级元素的字体大小
如果你使用em作为字体单位，如果你想让1em=10px的话，你需要在项目的 body{font-size=62.5%} 因为通常浏览器默认字体16px
- 100：？= 16：10 ===> 62.5
- 这样一来12px就是1.2em
相对的只是HTML根元素

em和rem用于设置非font-size属性时有很大区别要注意

先上结论，em设置非font-size属性时会对本元素的font-size进行一次叠加，但是rem就是很彻底的只看html根元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>111</div>
</body>
<style>
body{
  font-size:10px;
}
div{
  font-size:2em;
  width:2em;
  height:100px;
  border:1px solid red;
}
  </style>
</html>

以上，div宽度是1022=40px;

如果width:2em; ===> width:2rem; div宽度是16*2=32px;

使用em rem时候你要考虑到`chrome的最小字号`是12，所以不可能给你10px的字体的

使用`width:2em`是相较于自身元素计算后的字体大小再乘以2

没必要给body元素或者根元素设置`font-size:62.5%` 直接写`font-size:10px`即可

题目

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <span>2222222</span>
</body>
  <style>
  body{
  font-size:10px;
}
  </style>
</html>

span:12px
哪怕body允许你设置10px但是浏览器不允许你里面的元素真的生效10px，最低是12px因此给你12px