前段时间尝试翻译KeithJ.Grant的CSS好书《CSS in Depth》，书中第二章《Working with relative units》讲的是相对单位解释和例子可以说是相当全面了。看完之后发现自己对CSS相对单位了解的不多，希望能分享给大家，于是就有了这个系列的翻译。（如有勘误或翻译建议，欢迎GithubPR^_^）《别说你懂CSS相对单位》系列翻译：如何更愉快地使用em定义属性本文对应章节：2.1相对单位值的魔力2.1.1像素完美设计的斗争2.1.2像素完美网页的终结Pixel,pointandpc(pica)2.2em和rem2.2.1使用em作为font-size当我们使用em来声明font-size和其他元素中的属性，字体大小收缩CSS提供了很多方法来定义一个值。最熟悉也可能最容易使用的是像素，它被称为“绝对单位”。也就是说，5px在不同场景下是同一个值。其他单位，如em和rem，不是绝对的而是相对的。相对单位的取值会随着外界影响因素的变化而变化。例如，2em的值取决于您在哪个元素（有时甚至是哪个属性）上使用它。自然地，相对单位可能难以使用。开发人员，即使是经验丰富的CSS开发人员，通常也不喜欢处理相对单位，包括臭名昭著的em。em值的改变方式似乎不如px可预测。在本章中，我将揭开相对单位的神秘面纱。首先，我将解释它们为CSS带来的独特价值，然后我将帮助您更好地理解它们。我将解释它们的工作原理，并向您展示如何克服它们看似不可预测的本性。您可以使相关单位为您工作，正确工作，它们将使您的代码更简单、更灵活、更易于使用。2.1相对单位值的魔力CSS通过后期绑定将样式渲染到网页：内容及其样式在各自的渲染完成后合并在一起。这增加了设计过程的复杂程度，这是他们在其他类型的图形设计中所没有的，同时也赋予了CSS更大的力量——一个样式表可以被数百或数千个页面使用。此外，用户可以直接更改页面的最终渲染。例如，用户可以更改默认字体大小或调整浏览器窗口的大小。在计算机应用程序开发的早期，以及在传统出版业中，开发人员或出版商都非常清楚他们工作的媒介的局限性。对于特定的应用程序，窗口可能是400像素宽乘以300像素高，或者布局可能是4英寸宽乘以6.5英寸高。因此，当开发人员布置他们应用程序的按钮和文本时，他们很清楚这些元素可以制作成多大，以及屏幕上留有多少空间供他们在其他元素上工作。然而，在网络上，情况并非如此。2.1.1像素完美设计的斗争在网络环境中，用户可以将浏览器窗口设置为任意大小，CSS需要适应它。此外，用户可以在打开页面后调整页面大小，CSS也需要适应这些新的约束。这意味着当你创建页面时还没有调用样式，但是当页面呈现在屏幕上时，浏览器会计算样式的规则。这为CSS添加了一个抽象层。我们不应根据理想情况设计元素，而应声明一些样式规则，使元素能够在任何情况下工作。对于现在的互联网来说，你的页面可能会显示在4寸的手机屏幕上，也可能会显示在30寸的大屏上。长期以来，设计师们使用了大量的“像素完美”设计来缓解这个问题的复杂性。他们创建了一个严格定义的容器，通常是一个居中的大约800像素宽的垂直列。然后，他们在这些限制范围内进行设计，这或多或少类似于他们的前辈在本地应用程序或印刷出版物中所做的。2.1.2像素完美网页的终结随着技术的进步和制造商推出更高分辨率的显示器，像素完美的设计方法开始慢慢瓦解。21世纪初，将页面设计为1024px宽和800px宽哪个显示策略更安全？开发人员已经对这个问题进行了很多讨论。然后，我们就是否可以改成1280px宽进行了类似的讨论。是时候做出决定了。是让我们网站的内容宽度更宽（与过时的小电脑屏幕相比）还是更窄（与新的大屏幕相比）更好？当智能手机出现时，开发人员最终（被迫）停止假装每个人都可以在他们的网站上获得相同的体验。不管我们喜不喜欢，我们不得不放弃已知的多列固定宽度(px)布局并开始考虑响应式设计。我们无法再逃避CSS带来的抽象（abstraction），相反，我们不得不拥抱这个特性。响应式-在CSS中，这是指针对不同大小的浏览器窗口以不同方式响应更新页面的样式。我们将不得不更多地考虑不同尺寸的手机、平板电脑或桌面显示器。我们将在第8章详细介绍响应式设计，但在本章中，我将首先向您介绍一些重要的基础概念。增加的抽象意味着额外的复杂性。如果我设置一个宽度为800px的元素，它会如何显示在更小的窗口中？如果一个横向菜单无法在一行中全部显示出来，那将如何显示呢？在编写CSS时，您需要能够兼顾具体和一般。如果你有多种方法来解决一个特定的问题，你应该选择在许多不同场景中更通用的解决方案。在抽象主题上，相对单位是CSS提供的工具之一。您可以将字体大小设置为与窗口大小成比例地缩放，而不是将字体大小设置为14px。或者，你可以设置页面上的所有元素根据基本字号的大小变化，然后用一行代码就可以达到调整整个页面的目的。接下来，我们来看看CSS提供的实现上述效果的方式。像素（pixel）、点（point）和pica（pica）CSS支持一些绝对长度单位，其中最常见和最基本的是像素（px）。不太常用的绝对单位有毫米（mm，毫米），厘米（cm，厘米），英寸（in.，英寸），点（pt，点，印刷术语，长度为1/72英寸），pc（pica，Typographic学期，长度为12分）。如果想看懂计算，上面的长度单位可以直接换算成另一个单位：1inch=25.4mm=2.54cm=6pc=72pt=96px。因此，16px相当于12pt(16/96×72)。设计师通常更熟悉点的使用，而开发者更习惯使用像素，所以在与设计师沟通的时候，可能需要在两者之间做一些计算工作。像素这个名称有点误导——1个CSS像素并不严格等同于显示器的1个像素，尤其是在高分辨率显示器（例如“视网膜显示器”）上。尽管CSS测量值可能会因浏览器、操作系统和硬件而略有不同，但96px始终大致等于屏幕上的1物理英寸。（尽管它可能因某些设备或用户设置而异。)2.2em和remem是最常见的相对长度单位。这是排版中使用的一种测量方法。参考值是当前元素的字体大小。在CSS中，1em表示当前元素的字体大小，实际值取决于应用在哪个元素上。图2.1显示了一个带有1em填充的div。【图2.1：1empadding的元素（添加虚线是为了让padding更明显）】模板代码片段如下。这套样式规则定义字体大小为16px，也就是元素本身的1em所代表的值，然后用em来声明元素的padding。将这段代码添加到一个新的样式表中，在下写一些文字，然后到浏览器中查看效果。代码片段2.1：使用em.padded{font-size:16px;填充：1em；1}1在padding上设置每个方向的padding值到字体大小。将padding赋值为1em，乘以字号，得到一个值为16px的padding渲染值。重点来了，用相对单位声明的值会被浏览器转换成绝对值，我们称之为计算值。在此示例中，将填充更改为2em会产生32px的计算值。如果同一元素的另一个选择器用不同的字体大小值覆盖它，这将改变该字段下em的基值，那么padding的计算值也会相应改变。在设置padding、height、width或border-radius等属性时使用em会很方便，因为如果它们继承不同的字体大小，或者如果用户更改字体设置，它们会均匀缩放。图2.2显示了两个不同大小的盒子。框内的字体大小、填充和边框半径各不相同。[图2.2：具有相对大小的padding和border-radius的元素]您可以通过使用em声明padding和border-radius来声明这些框的样式规则。首先将每个元素的padding和border-radius设置为1em，然后为每个框分配不同的字体大小，然后其他属性将随着字体大小缩放。在您的HTML代码中，使用类名称box-small和box-large创建以下两个框，代表两个字体大小修饰符。[代码片段2.2：在不同元素上使用em(HTML)]SmallLarge现在，添加Style以下内容到您的样式表中。这里em用于声明一个框。还定义了小型和大型字体大小修饰符以指定不同的字体大小。[片段2.3：在不同元素(CSS)上使用em].box{padding:1em;边界半径：1em；背景色：浅灰色；}.box-small{字体大小：12px；1}.box-large{字体大小：18px;1}1字体大小不同，会改变元素实际em值的大小。这是em的一个强大功能。你可以定义一个元素的字体大小，然后用一个简单的语句通过改变字体大小来控制整个元素的缩放比例。稍后您将创建另一个示例，但首先，让我们谈谈em和字体大小。2.2.1使用em作为font-size当font-size使用em作为单位时，它的行为有点不同。正如我之前所说，em是基于当前元素的字体大小。但是当你将一个元素的字体大小设置为1.2em时，这意味着什么呢？元素的字体大小不能等于其自身的1.2倍。相反，字体大小上的em首先是从继承的字体大小派生的。一个简单的例子，见图2.3。下面显示了一些不同字体大小的文本。在代码片段2.4中，您将使用em来执行此操作。[图2.3ems中的两种不同字体大小]将以下代码片段添加到您的页面。标签内的第一行文本将根据正文的字体大小呈现。第二部分，口号（slogan），继承了父元素的字体大小。[代码片段2.4模板相对于font-size]WelovecoffeeWelovecoffee
11slogan继承了的字体大小。在代码片段中，CSS代码片段声明了正文的字体大小。为了清楚起见，这里我使用px来声明。接下来，您可以使用ems来增加标语的字体大小。[代码片段2.5：在字体大小上使用em]body{font-size:16px;}.slogan{1font-size:1.2em;1}11计算：该元素继承字体大小，乘以1.2slogan声明的字体大小为1.2em，为了计算转换后的像素值，需要参考继承的字体大小16px，16*1.2=19.2,所以计算出的字体大小值为19.2px。Tips如果你已经知道以px为单位的基本字体大小，但想将其更改为em声明，这里有一个简单的计算公式：目标em值=目标像素值/父元素（继承元素）像素值。例如，如果您想要10px的字体大小，而父元素的字体大小为12px，则10/12=0.8333em。如果你想要16px的字号，父元素的字号是12px，那么16/12=1.3333em。我们将在本章中多次使用这个计算公式。了解大多数浏览器的默认字体大小为16px会对您有所帮助。从技术上讲，关键字medium被计算为16px。当我们同时使用em声明元素内的字体大小和其他属性时，您已经使用em声明了字体大小（基于继承的字体大小值）。此外，您还使用em声明了其他属性，例如padding和border-radius（基于当前元素的font-size值）。当您使用em在同一元素上声明字体大小和其他属性时，em会发挥神奇的作用。这时候浏览器首先要计算出font-size，然后根据这个值计算出其他的值。这些属性声明为具有相同的em值，但它们很可能具有不同的计算值。在前面的示例中，我们计算出字体大小为19.2px（继承的16px乘以1.2em）。图2.4是相同的标语元素，但有一个额外的1.2em内边距和灰色背景以使内边距尺寸更明显。可以看出padding略大于font-size，虽然声明的时候em值是一样的。【图2.4一个font-size为1.2em，padding为1.2em的元素】目前的情况是这个段落从body继承了16px的字号，计算出的字号值为19.2px。这意味着19.2px是当前字段中1em的基值，这个值将用于计算padding值。相应的CSS代码如下，更新您的样式表并查看您的测试页面。[代码片段2.6在字体大小和填充上使用em]body{font-size:16px;}.slogan{font-size:1.2em;1个填充：1.2em；2background-color:#ccc;}1assignment给19.2px赋值23.04px2本例中padding的声明值为1.2em，乘以19.2px（当前元素的字体大小），得到23.04像素。我们可以看到，虽然font-size和padding声明的em值相同，但是它们的计算值不同。字号缩小当你使用em声明多级嵌套元素的字号时，会出现意想不到的效果。要找出每个元素的实际值，首先需要知道它继承的父元素的字体大小。如果父元素的字体大小也用em声明，那么你需要知道它的父元素的字体大小。去dom树上查找，等等。当你用em声明列表的字体大小，并且列表嵌套了好几层时，效果更明显。大多数Web开发人员会发现图2.5的嵌套形式在他们的整个职业生涯中都有些熟悉。文字在逐渐缩小！正是因为em带来的那种烦人的问题，开发者才避开em。【图2.5嵌套列表字号缩小】当你有多层嵌套列表，并且每一层声明的字号单位为em时，会出现字号缩小的情况。在片段2.7和2.8的示例中，无序列表的字体大小为0.8em。此选择器对页面上的所有ul均有效，因此当一个列表从另一个列表继承字体大小时，em具有复合效果。[代码片段2.7在列表中使用em]body{font-size:16px;}ul{font-size:.8em;}[代码片段2.8多级嵌套列表]
1这个列表嵌套在第一个列表中，继承它的字体大小2然后这个列表嵌套在另一个列表中，它继承了第二个列表的字体大小3...等等。每个列表的字体大小是父元素字体大小的0.8倍。这意味着第一个列表的字体大小为12.8px，嵌套子列表的字体大小为10.24px(12.8px*0.8)，第三个列表的字体大小为8.192px，依此类推。同样，如果给字号赋一个大于1em的值，反之，文字的字号会逐层变大。我们想要的效果是如图2.6所示在顶层声明字号大小，但是下面嵌套层级列表的字号保持不变。【图2.6正常字号的多级嵌套列表】其中一种实现方式见代码片段2.9。第一个列表的字体大小仍然是0.8em（见示例2.7），第二个选择器对嵌套在无序列表中的无序列表有效——即除第一个无序列表之外的所有无序列表。嵌套列表现在设置为与父元素相同的字体大小，如图2.6所示。[代码片段2.9字体大小收缩修正]ul{font-size:.8em;}ulul{1font-size:1em;1}1对于嵌套在lists中的lists，字体大小应该设置为和parentElementsaresame这样解决了问题，但不是最优的。因为您设置了字体大小值，所以立即用另一个选择器覆盖了规则。如果您可以为嵌套列表声明一个特定的选择器而不相互覆盖，那将是一个更好的解决方案。现在我们清楚了，如果你不是一个比较细心的人，你应该远离他们。使用em作为填充、边距和元素缩放的单位很好，但是当em满足font-size时，事情就会变得复杂。谢天谢地，我们有更好的选择——rem。（未完待续，敬请期待下一篇《如何更愉快地使用rem》）《别说你懂CSS相对单位》系列翻译：如何更愉快地使用em【本文】如何更愉快地使用remViewport相关的单元应用无单元数字和行高CSS定制属性章节：2.1相对单位值的魔力2.1.1像素完美设计的斗争2.1.2像素完美网页的终结像素、点和pc（pica）2.2em和rem2。2.1使用em表示font-size当我们在一个元素内使用em同时声明font-size和其他属性时字体大小缩小问题2.2.2使用rem表示font-size可用性：使用相对长度单位表示font-size2.3停止使用像素思维想想吧2.3.1设置一个合理的默认字体大小2.3.3使这个面板“响应式”2.3.3调整各个组件的大小2.4视口相对单位（viewport-relativeunits）字体中的CSS32.4.1-size在font-size上使用vw2.4.2，在font-size上使用calc()定义属性的值2.6.2通过JavaScript更改自定义属性的值2.6.3自定义属性初探原文摘要版权信息：作者：KeithJ.Grant书籍：CSSinDepth章节：与相关单位合作爱好者/励志老师/新西兰打工度假/铲屎官。目前就职于某大型电商公司B2B前端团队。感谢您阅读此处。如果您对以上内容有任何疑问或建议，欢迎留言。如果你和我一样喜欢前端，喜欢鼓捣独立博客或前沿技术，或者有任何专业问题，欢迎关注我，与我交流。独立博客：wuyuying.com知乎ID：@YuyingWuGithub：YuyingWu
