css中有很多单位，%、px、em、rem，还有较新的vw、vh等，每个单位都有特定的用途。例如，当需要设置一个矩形的纵横比为16:9，适应屏幕宽度时，很难使用除%以外的其他单位。所以并没有说某个单位是错的，某个单位是最好的。本文所说的页面适配是指相同的布局，在不同尺寸的屏幕上如何缩放、控制间距、宽高、字体大小等大小。页面适配的方式有很多种：使用px，结合MediaQuery进行逐步适配；使用%，按百分比自适应布局；使用rem，结合html元素的font-size根据屏幕宽度适配；使用vw，vh，直接根据视口的宽高适配。在这些大前提下，还需要对一些小细节进行微调。例如，在使用px时，可能需要在小屏幕上对某个容器进行transform:scale(.8)，使其适当缩小。使用rem时，需要固定页面左右间距为10px等可能是个案。有的同学可能要炸了，你不说话有什么区别？是的，我的意思和开篇一样，谈某一个单位的好坏是没有意义的。我们最关心的是：在什么场景、什么单元最适合使用。不想自欺欺人，直接罗列一些我觉得比较实用的方法。这些是我根据自己多年的开发经验和大量研究得出的结论：在视觉稿中需要固定大小的元素上使用px。例如，1px的线条，4px的圆角边框。在字体大小、（大多数）间距上使用rem。谨慎使用它们。为什么我的标题没有提到%、vw和vh？这些都是按比例改编的，只是参考对象不一样。%是对父容器的引用，vw和vh是对视口的引用。他们的使用场景很固定，比如上面提到的16:9的容器，除了用%，还有没有更合适的方式呢？此外，1vw=视口宽度的1%。所以当你确实需要适配视口的大小时，使用这个单元，而且使用场景比较固定。接下来，我将详细介绍这三个结论的由来。为什么要谨慎使用em？em会叠加计算。这种机制下太容易出错了，因为你不知道这个css具体指定的字体大小。//HTMLabcdefabc//CSSspan{font-size:1.5em;}实际效果是这样的：首先要搞清楚em的计算原理，它是根据当前元素的字体大小按比例计算的。outerspan的字体大小是16px（浏览器默认值），所以1.5em之后是24px。由于继承了字号，继承了innerspan的字号为24px，1.5em后变成了36px。所以，即使你想使用em，也尽量不要用在继承的属性（font-size）上，除非你真的知道自己在做什么！例如，如果你想根据字体大小自动调整字符间距，你可以这样做：.content{font-size:1rem;letter-spacing:.03em;}但是再想一想，letter-spacing是由.content的字体大小决定的，而它是由html的字体大小决定的。那为什么letter-spacing不直接用rem呢？remvs.pxpx是我更喜欢的单位，简单直接。但在理性的驱使下，还是需要合理考虑使用场景。px的性质决定了它只能用于固定尺寸。也就是说，如果视觉设计者规定，边框宽度必须是2px。那样的话就没有讨论的必要了。除了固定大小的px，其他大部分情况下都可以使用rem。现在考虑一个实际的开发场景。一般来说，开发前都有一个视觉稿。两种情况：1、假设视觉稿是根据iPhone6、iPhone6+等尺寸制作的，那么可以根据MediaQuery进行适配。2.设计师只给你一个模型的视觉稿。以iPhone6为例，750x1334，2倍屏转换后为375x667。第一种情况不讨论。适配了MediaQuery断点之后，其实是在处理第二种情况。第二个意思是你需要根据宽度为375px的手稿进行扩展以适应任意宽度的屏幕。（页面的高度跟业务有关，不用着急，宽度一定要固定）接下来得到视觉稿如下：测量后主要参数如下：页面间距10px文字间距10px，字体size16pxAheight100pxBheight50px,topspacing30pxsoon会写HTML结构和CSS。
