在我的关于CSS字体大小的文章中，我写了关于（相对的）新的视窗单位。这些单位vw,vh,vmin,和vmax都是基于浏览器视窗(Viewport)的大小的。因为它们的实际大小是根据视窗(Viewport)大小改变的，对于响应式设计中这使它们成为很好的单位。虽然在我以前的文章中我反对使用这些单位定义字体大小，但是用它们定义布局元素是非常有用的。

你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 rem ，何时使用 em。 本教程将帮你弄清楚!

网页字体排版的最佳实践之一就是使用相对单位，如rem和em。问题是，你应该使用哪一个呢?一直以来，rem支持者和em支持者之间都存在着争辩，认为应该使用自己支持的那个。在这篇文章中，你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。

你是否思考过对于媒体查询你应该使用px, em还是rem？我也产生过同样的问题，并且目前为止，我还是没有明确的答案。一年之前，我第一次创建 mappy-breakpoint 仓库时，我一直使用rem单位。之后一次和Sam Richard谈话之后，我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询，除了em和rem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题，我想知道像素是否还可以用于媒体查询。这周，我打算弄明白两者之间的区别。

我之前有写过基于rem和em的响应式排版，并且也有写过两篇有关模块化组件的博客。在这些文章中，有关视窗单位的评论不可避免的形成了一个话题。

视窗单位一直都存在争议，部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法，这样就让本来简单的事情变得更加复杂化。一个典型的示例是：vw的计算是否要包含浏览器的滚动条？那么网站的导航或页面控件呢？这些应该算在计算中吗？还有一些设备本身的物理属性（比如iPhone X的刘海）是不容忽视的。

说到度数，你可能已经从生活中了解了很多关于他们相关的知识。在学校里学习几何课，做基本的木工活，进入外层空间或在图像编辑器中旋转一个元素等，都会有角度相关的身影。在现实世界中，度数几乎是测量角度的单位。它在Web中同样是一个受欢迎的角色，也适用于我们将遇到的各种场景。幸运的是，在现实世界中的度数和虚拟世界中的度数有很多相似之处，所以在这篇文章中将来学习一些有关于度数相关的知识，然后深入了解一些细节。

CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章，咱们就来一起看看这个特性有什么特性，给我们又能带来什么好处。感兴趣的同学，请继续往下阅读。

CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 CSS 中的值和单位应该不会感到陌生，但大部分同学应该都会把精力集中于单位这一块，事实上也是如此，在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。

CSS中的单位有很多类型，不同类型单位计算方式也有所不同，特别是**百分比（%）**单位，它的计算和使用的属性有着直接关系。其中最为重要的是：百分比是一定要有其对应的参照值，也就是说，百分比值是一种相对值，任何时候要分析它的计算值，都需要正确的找到它的参照值。言外之意，CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中，我们主要来看看百分比单位在不同使用场景中计算方式。在CSS中能运用%值的属性很多，为了能让大家更好的理解使用%的规则，我们从最熟悉和最简单地属性开始。