什么是移动端适配？

目的：
这个肯定都知道，让网页在各种不同的设备上，能够比较正确的展示效果，而不是在这个设备上是正确的，到了另外一个设备上不能看。

移动端如何开发页面？

开发的时候，一般都会设置如下属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这里基本意思就是设置浏览器的宽度等于设备的宽度，比如iphone 6的宽度就是375， 设置缩放比例为1，为了当写1pxcss像素的时候，比如在iphone 6的时候，等于iphone 6的两个物理像素，一个设备物理像素，说白了，就是假设有个div在ui给的设计图宽度是375的时候，我们设置css样式

div {
    width: 200px;
    height: 200px;
}

的时候，div在iphone 6中占据 375分之200。

移动端适配原理是什么？这么多术语到底如何记住？

相信准备做移动端的适配的，都搜了很多文章，所有的文章都是从一个个术语介绍，等到你看完所有的文章，终于弄懂了一个个的术语，什么dpi，什么viewport，等过段时间，再回想起来的时候，啥也想不起来了。

其实适配就是把ui给的图，按照一定的比例，给缩小到手机里边去，但是因为手机有不同的大小，所以我们的比例不能设置死，必须让它根据手机的展现大小的窗口动态的变化。

物理像素，设备物理像素，dpr？

比如iphone6， 物理像素就是750，设备物理像素就是375，dpr是750/375。

ui图和rem关系？

大多数ui给的图都是宽度都是750 uipx的，那这个宽度如何在开发中如何转换成px（就是通常我们css样式中设置的px），也就是说如何把1uipx 等于多少px？

可以看到iphone6，7，8的设备独立像素都是375667，也就是有7501334的物理逻辑像素

移动端图片模糊

问题其实就是在iphone6下一个px像素对应屏幕中的四个物理像素，所以当一张图片，比如大小是200px200px的时候，在iphone6中实际使用渲染的是用400400个物理像素去渲染，所以图片中的一个像素需要用四个物理像素渲染，就显得有点模糊。

vw + rem 如何布局移动端

这个的原理是设置html 的font-size：1vw，这个我的理解是和纯rem布局，难道只是少了通过js来设置html的font-size的大小？

或者单纯的使用vw，宽度都设置成vw？