1.适配方案的优缺点。缩放先是直接写在px里面，然后用meta标签中的缩放来缩放整个页面，简单粗暴。优点是简单快捷，缺点是有些样式的缩放无法控制，有些边框之类的在小屏幕上会变得很细。据说早期的天猫首页就是这样做的。事实上，后来的所有适配方案都是基于这个原则。编码时以设计稿为标准，手机显示时根据不同机型的显示宽度进行缩放，但缩放技术不同。rem1rem等于的fontSize；rem适配方案只需要为的fontSize设置任意大小即可。因为设计稿一般都是750px宽，所以将fontSize设置为75px是比较常见的经验标准。太大或太小都可能影响最终结果的准确性。之后可以确定1rem=75px，然后在恢复设计稿的时候把px计算换算成rem。并在JavaScript中添加脚本（flexable.js），根据屏幕显示宽度动态改变的fontSize。屏幕宽度越大，fontSize越大；rem的优点是根节点的fontSize可控（即rem的缩放标准完全可控），兼容性好。但是总是要模拟vw的效果，多了一层转换，比较麻烦，不直观，精度稍差；vw1vw等于当前屏幕显示区域的百分之一；vw是为动态布局而生的，所以不需要辅助任何脚本。一般设计稿的宽度为750px，所以还原设计稿时，1vw=7.5px，据此可以将设计稿上的px换算成vw；vw的优点是准确方便，但兼容性稍差，标准实现比rem好3年后；emem现在一般不用于移动端适配，这里只是旁注；em是唯一可以在本地实现相对长度的单位；font-size中使用的em是相对于父元素的字体大小，其他属性中使用的是相对于自身的字体大小，比如width（来自：MDN）em的出现是为了解决文字不能显示的问题随页面放大。在ie6时代，如果使用px设置font-size，当用户使用Ctrl+wheel放大页面时，文字不会放大。但是现代浏览器不再有这个问题；利用em根据自身字体动态适配的特性，可以实现很多需求，比如根据字体大小动态改变行高、宽度、边距等；2.逻辑像素和物理像素逻辑像素就是我们通常所说的像素，即CSS中的px，所以逻辑像素是一个抽象的数字单元。物理像素是指电子屏幕的最小发光单元。其实在最早的时候，是不需要做这么严格的区分的，因为那时候显示1个逻辑像素和1个物理像素，也就是像素比（DPR，物理像素与逻辑像素的比值）pixel)被设置为1。后来iphone4打破了这个规则。它的视网膜屏幕可以用2倍的物理像素来显示1个逻辑像素，让手机的显示效果更加细腻。如下图，即DPR2?横纵各有2个像素点。手机也有屏幕像素密度（PPIasPixelsPerInch）的概念，即每英寸的物理像素数。一般来说，在手机的观看距离下，当PPI达到300时，人眼就看不到屏幕的像素点了，这就是Apple视网膜显示屏名称的由来。3、移动端图片模糊。移动端适配图片。由于手机端dpr不同，同一张位图在dpr高的手机上会出现模糊现象。可以根据dpr使用N倍的图片来解决，即dpr=2，使用2倍的图片。原因是位图的像素信息（位置、颜色）是固定的，但是在高dpr屏幕上显示时，会用多次物理像素来显示同一个逻辑像素，底层算法不会转换物理像素变成一个对应图片的像素，但是最近的颜色被挑出来，最终导致图片模糊。如下图所示：为什么要选择最近的颜色，而不是通过多个物理像素直接显示相同的颜色？因为在显示几倍物理像素的图片时，如果单纯使用N个物理像素直接显示1个图片像素，在移动端的高画质屏幕上，锯齿感会很明显。为了解决这个问题，使用平滑技术（附近的颜色是操作之一）。假设有一张图片显示0，下面是处理过程：从上图可以看出，dpr2比dpr1更能处理图像的精细度，所以不是简单的用4个物理像素代替1个物理像素像素像素。最后的结论是不能直接挑颜色，还是就近挑颜色比较好。4、小数点像素导致的图片比例不平衡在做手机适配时，因为px是rem/vw转换后的值，所以必须有小数点。十进制的逻辑像素不能和物理像素完美对齐，也不可能让一个完整的物理像素用来显示0.333个逻辑像素，所以在这种情况下，webkit内核会有两种对齐方案：蓝色代表计算出来的大小，和黑色线框代码实际上是对齐的。图片来自：[](https://trac.webkit.org/wiki/...)https://trac.webkit.org/wiki/...enclosingIntRect只是将渲染区域扩大1px，保证完整覆盖渲染的物理像素，这种方案只用在少数几个地方，比如渲染svg，为了保证盒子能完全包裹住矢量图形。pixelSnappedIntRect，顾名思义，指的是在容器内捕捉像素的方案。但不是简单的四舍五入，因为如果只是四舍五入，会造成最后的拉伸或者与容器的差异过大。这个方案是为了保证最终的渲染结果与计算结果最多相差1px。容器中有三张宽度为14.25px的图片。实际的近似渲染计算过程是：首先将容器中第一张图片的宽度取整，然后第一张图片变成14px宽；由于第一张图片四舍五入后小于0.25px，第二张图片需要相应加上0.25px，14.25+0.25=14.5px，四舍五入后为15px；第二张图多用了15-14.5=0.5px，所以第三张图需要减去这0.5px，14.5-0.5四舍五入为14px；最终容器的计算宽度为14.25*3=42.75，而实际的物理像素对齐为14+15+14=43，与我们声明的宽度只相差0.25px，所以最终渲染的误差结果和小数点像素不得超过1px。从上面的计算结果可以看出，三个div中第二个的宽度是不一样的，所以这就是小数像素导致样式偏差的原因。因为这种样式偏差存在于各种布局盒中，但是因为在图片上效果比较明显（imagesquashing），所以通常只需要在展示图片的时候处理这??个问题。目前没有更好的解决办法，只能尽量写坏点，图片可以用svg。这块是关于LayoutUint的知识，用于解决页面缩放时的渲染问题。具体可以参考webkit团队的文章。其中：嵌入到客户端时，会出现不同尺寸手机的web适配和native适配不一致，导致用户体验碎片化；在设计层面，当客户使用更大的屏幕时，他们希望看到更多的内容。但这种适配方案只能让5寸屏和4寸屏接收到等量的信息；关于字体，从用户体验的角度来说，用户希望看到的字体是绝对大小的，就像看报纸一样。再大的报纸，字体也应该是一样大的，有最适合阅读的字体大小，而自适应打破了这种设计理念。知乎的移动页面完全使用px；参考资料：CSS值单元LayoutUnit&SubpixelLayoutremLayoutUnit产生的decimalpixel问题深入理解移动端canvas绘制模糊问题
