前段时间试着翻译了KeithJ.Grant的CSS书《CSS in Depth》，第二章《Working with relative units》，书上对相对单位的介绍解释和例子可以说是相当全面了。看完之后发现自己对CSS相对单位了解的不多，希望能分享给大家，于是就有了这个系列的翻译。（如有勘误或翻译建议，欢迎GithubPR^_^）《别说你懂CSS相对单位》系列翻译：如何更愉快地使用em如何更愉快地使用rem视口相关单位的应用【本文】无单位数和线heightCSSautoDefineattributes本文对应章节：2.4Viewport-relativeunits（viewport-relativeunits）CSS32.4.1Usevw2.4.2onfont-sizeUsecalc()onfont-size2.4Viewport-relativeunits（viewport-relativeunits）units))你学完了em和rem，它们都是基于font-size的，但它们并不是唯一的相对单位。还有视口相关的单位，根据浏览器的视口大小来定义长度。视口（viewport）——浏览器窗口中用于呈现页面的可见区域，这不包括浏览器的地址栏、工具栏、状态栏等（如果有的话）。如果您不熟悉视口相关单位，这里有一个简短的介绍。vh-视口高度的1/100vw-视口宽度的1/100vmin-较小视口宽度或高度的1/100（IE9支持vm）vmax-较大视口宽度或高度值的1/100（在写的时候IE和Edge都不支持）比如50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于两者（宽度或高度）中较小的值。如果我们需要保证一个元素无论是横屏还是竖屏都适合屏幕，这个属性会很有帮助：如果是横屏，vmin的参考值就是屏幕的高度，如果是竖屏屏幕，它的参考值是屏幕的宽度。图2.10显示了方形元素在不同屏幕尺寸上的视口。宽度和高度都声明为90vmin，即宽度和高度中较小值的90%。边长在横向模式下等于高度的90%，在纵向模式下等于宽度的90%。[图2.10如果将元素的宽度和高度定义为90vmin，则无论其大小或方向如何，它总是显示为边长略小于屏幕视口的正方形。]这个元素的样式可以在片段2.18中看到，渲染一个适合屏幕大小的大正方形，而不管浏览器的大小。可以添加来查看页面的效果。[代码片段2.18使用vmin作为边长的正方形元素].square{width:90vmin;高度：90vmin；background-color:#369;}如果想让大英雄图充满屏幕，视口的相对长度是最合适的。你的图片可以放在一个长容器里，设置图片的高度为100vh，那么它的高度就会和视口的高度一样。请注意，相对于视口的单位对于大多数浏览器来说是一项相对较新的功能，因此当您尝试将此功能与其他样式混合搭配时，您可能会遇到一些奇怪的错误。详情请参考http://caniuse.com/#feat=viewport-unitsCSS3列表中的“已知问题（KnownIssues）”本章提到的很多单位类型其实在早期的CSS版本中是没有的（特别是rem和视口相关单位）。它们是在语言更新的一系列迭代中缓慢添加的，我们将其最新版本称为CSS3。在20世纪末和21世纪初，在CSS规范的初始版本发布很久之后，只做了很小的改动。1998年5月，W3C（万维网联盟）发布了CSS2规范。不久之后，纠正了版本2中的问题和错误的2.1版开始发布。CSS2.1的工作持续了很多年，但没有添加任何令人印象深刻的功能。直到2011年4月，2.1版本才最终被确认为“ProposedRecommendation”。到这个时候，大部分浏览器已经很好地支持了CSS2.1的特性，并且在此基础上，浏览器努力添加了一些新的特性。这是CSS3的新规范。“3”是一个非官方版本号，实际上没有CSS3规范。相反，该规范被分成单独的模块，每个模块都有自己的版本号。背景和边框规范已经从盒子模型（boxmodel）和级联与继承（cascadingandinheritance）规范中分离出来。这样W3C就可以针对CSS的某个模块进行更新迭代，而不用同时更新其他不相关模块的内容。在这些模块规范中，很多还处于版本3（现在称为“level3”），但是一些模块（比如选择器规范（selectorsspecification））已经达到了level4，而其他的（比如flexbox）还处于level1.这些新功能已经进入了人们的视野。我们可以看到，在2009年到2013年间，大量的CSS新特性涌入了浏览器。其中有众所周知的rem和viewport相关单元，还有新的选择器、媒体查询、网络字体、圆角边框、动画、Transitions、transformation和定义颜色的不同方式。但是，每年增加的新功能数量都在逐年稳步增加。这意味着我们不再只处理特定版本的CSS规范。这是一个活的标准，每个浏览器都在不断支持新的特性，开发者会开始使用它们并逐渐习惯它们。CSS4可能不会再存在了，如果存在，它可能只是一个营销术语。本书虽然也会提到CSS3的新特性，但没有必要一一列举出来。就整个网页而言，这些都是CSS。2.4.1在字体大小上使用vw如果应用程序使用与视口相关的单位，则效果最不明显的地方可能是字体大小。事实上，我发现使用vh和vw作为字体大小比元素宽度或高度更实用。试想一下，如果将元素的font-size声明为2vm会怎样？桌面屏幕宽度为1200px，2vm等于24px（12002%）。虽然平板电脑的屏幕宽度为768px，但2vm大约等于15px(7682%)。很酷的是元素在两种尺寸下都能很好地缩放。这意味着没有突然的断点，元素会随着视口大小的增加而平滑增长。不幸的是，24px对于大屏幕来说有点太大了。而且更糟糕的是，在iPhone6上直接缩小到7.5px。好消息是缩放有效，坏消息是角落案例处理得有点糟糕。您可以使用CSS方法calc()解决此问题。2.4.2在字体大小上使用calc()calc()函数支持对2个或更多值的基本操作。此功能对于不同类型的单元之间的操作特别有用。此函数支持加法（+）、减法（-）、乘法（*）和除法（/）。其中，加减运算符两边必须有空格，所以我建议大家养成在四个运算符两边总是写空格的习惯，比如calc(1em+10px)。您将在下一个代码片段中使用calc()计算以vh为单位和以em为单位的值。从您的样式表中删除前面设置基本字体大小的代码块（以及相关的媒体查询代码）并添加以下代码。[片段2.19calc()在字体大小中使用em和vh单位]:root{font-size:calc(0.5em+1vw);}现在，打开页面并慢慢调整浏览器的大小。你会发现字体大小变化之间的过渡非常平滑。这里的0.5em代表字号的最小值，1vm代表响应式向上堆积。这样，基本字体大小在iPhone6上的11.75px和1200px宽的浏览器窗口上的20px之间缩放。您可以根据自己的喜好更改这些值。您现在可以实现响应策略的核心逻辑，而无需添加一行媒体查询代码。页面上的所有元素都根据视口大小平滑缩放，不再有3或4个硬编码断点。（下一篇《无单位数字和行高》已同步发布，一起来看看吧^_^）《别说你懂CSS相对单位》系列译文：如何更愉快地使用em如何更愉快地使用rem视口相关单位应用【本文】无量纲数和行高CSS自定义属性章节：2.1相对单位值的魔力2.1.1像素完美设计的斗争2.1.2像素完美网页的终结像素、点和pc（pica）2.2em和rem2.2.1Useemforfont-size当我们在一个元素内使用em同时声明font-size和其他属性时字体大小缩小问题2.2.2Useremforfont-sizeUsability:Userelativelengthunitsforfont-size2.3Discontinued使用像素思维来思考2.3.1设置合理的字体大小默认值2.3.2使这个面板“响应式”2.3.3调整单个组件的大小2.4视口相对单位（viewport-relativeunits）CSS32.4.1中在字体大小上使用vw2.4.2在字体大小上使用calc()2.5无单位数字和行高2.6Customproperties（也叫“CSS变量”）2.6.1动态改变自定义属性的值2.6.2通过JavaScript改变自定义属性的值2.6.3自定义属性初探原创版权信息汇总：作者：KeithJ.GrantBook:CSSinDepthChapter:Workingwithrelativeunits作者@YuyingWu，前端爱好者/励志老师/新西兰打工度假/铲屎官。目前就职于某大型电商公司B2B前端团队。感谢您阅读此处。如果您对以上内容有任何疑问或建议，欢迎留言。如果你和我一样喜欢前端，喜欢鼓捣独立博客或前沿技术，或者有任何专业问题，欢迎关注我，与我交流。独立博客：wuyuying.com知乎ID：@YuyingWuGithub：YuyingWu
