移动端适配涉及移动端适配。首先必须明确几个概念：1视口：即设备上用来显示网页的区域，也叫视口。它不等同于浏览器的可视区域，它可能大于或小于浏览器的可视区域。在PC上，分辨率通常根据设备的分辨率显示。这时候css的1px通常就等于physics的1pixel，而且因为可以通过调整浏览器窗口的大小来调整浏览器的可视区域，所以在PC端你可以不用关心so很多关于视口。但是在移动设备上，这个视口尤为重要，因为我们无法调整浏览器的可视区域，它的可视区域就是屏幕的大小。但是很多网站为了能够显示所有内容，会将视口宽度设置为980px或者1024px，但这会导致设备上的浏览器出现水平滚动条。同时，由于相同尺寸的设备的不同分辨率（高分辨率屏幕等），这导致css1px不再等于1个物理像素。对于高分辨率的屏幕，虽然分辨率提高了，但尺寸无法增加，所以只能在1px像素上容纳更多的物理像素。2viewpoet像素：本质上是DIP（DeviceIndependentPixels），中文意思是设备无关像素，是与上述所有像素没有绝对逻辑关系的单位。其实是浏览器内部对逻辑像素进行再处理的结果。简单理解，就是调整逻辑像素的缩放比例，实现一个适配设备的中间层。设备尺寸已经有了不同数量级的物理像素，我们使用的csspx是设备无关像素。4Devicepixelratiodpr：dpr=devicephysicalpixel/deviceindependentpixel5pixelsperinchppi：指屏幕每英寸的物理像素6physicalpixel：设备能够控制显示的最小单位我们常说的resolution是设计者给的设计图的像素pxphysicalpixel7:physicalpixel我们在适配不同尺寸的手机时，要注意屏幕越大，显示的内容越多，而不是更大内容。但很多时候，设计师并不会针对性地给出每一套设计方案。同时，如果真的要为不同的size适配不同的size，简单的可能还好，灵活使用layouts或许可以，但是对于更复杂的可能要通过mediaquery来实现。这也更昂贵。那么具体如何实现，就要看需求和条件了。适配：以前很多人都是用rem的方式来实现移动适配的。rem是一个基于根元素font-size的单位，用来配合flexible实现对不同移动设备的兼容和适配。其实rem只是在viewport、vw、vh不能很好兼容的情况下的过渡产物，但是现在px+vw可以实现移动适配，要求高的可以使用mediaquery。同时注意视口的设置。如果一定要用比例，或者有一定的需求。然后可以用px+vw，用rem过渡，本质上还是px+vw。下面是一个具体的实现例子：对于iPhone6，如果要适配1rem=100px：100vw=375px，1vw=3.75px，1px=0.2666666667vw约等于0.267vw，可以知道当1rem=100px=26.67vw，可以满足要求，所以在style中设置html{font-size:26.67vw}，此时，1rem=100px这里虽然使用了rem，但是已经失去了原本的意义，只是作为过渡使用单位，因为如果直接用vw的话，转换起来很麻烦。如果进一步考虑方便，可以使用相关的px-to-rem插件或loader进行处理，这样自适应就基本完成了。
