原文链接em单位em单位是根据font-size继承计算的.parent{font-size:16px;}.parent>.child{font-size:1.2em;/*19.2px*/}也用到了em，font-sizevs其他属性比例相同，只是计算结果不同；当使用em单位时，margin和padding等属性是根据当前元素的字体大小计算的。当前元素的字体大小基于父元素。.tile{字体大小：1.2em;/*19.2px*/边距：1.2em;/*23.04px*/内边距：1.2em;/*23.04px*/border-radius:1.2em;/*23.04px*/}深嵌套em导致文字收缩问题ul{font-size:0.8rem;}解决方法rem"Rootem"-计算相对于根节点()的font-size使用remul{font-size:0.8rem;}默认推荐：rem作为font-size单位，px作为border-width单位，em作为padding，margin，border-radius等，其他的line使用无单位数字-height使用单位：混合计算的结果是无单位的：根据后代的字体大小自动改变em，有很多优点更精确的代码简单，适应性更好.com排版基础-RobertBringhurst好看的排版一般都用ratiotype-scale.com对网络排版有相同的处理方式。它使用标量以px为单位计算字体大小，然后将它们转换为em标量以调整大小。模块大小调整px在容器上很乏味，确定字体大小基值在模块的根节点上使用rem，对其他所有内容使用em使用rem作为全局大小单位使用em作为区域大小单位scalethemodule.tile{border:2px纯色#000;填充：0.6em1.2em；边界半径：0.3em；底部边距：1em；字体大小：1rem;}.tile__title{字体大小：0.8em;文本转换：大写；}演示缩放shape.dropdown__toggle::after{内容：“”；位置：绝对；右：1em;顶部：1em；边框：0.3em实心；border-color:blacktransparent透明;}demozoomicon/picture.twitter>img{height:1em;宽度：1em；vertical-align:-0.1em;}demozoomshadowa:link{text-decoration:none;框阴影：插图0-0.1em00#cef；transition:box-shadow0.2s缓入缓出；color:#346;}a:hover{box-shadow:inset0-1.2em00#cef;}演示一些缩放断点的方法:root{font-size:0.8em;}@media(min-width:35em){:root{字体大小:1em;}}@media(min-width:50em){:root{字体大小：1.25em;}}视图相对单位vw-视图宽度的1%vh-视图高度的1%vmin-vh/vw中较小的那个vmax-vh/vw中较大的
