移动端适配问题

做过移动端的小伙伴们都知道，移动端的适配是一个比较难解决的事。首先我们先来了解下移动端的物理像素、逻辑像素、像素比的概念。
1.物理像素：通常是指浏览器的分辨率，也可理解为屏幕的宽度*高度。开发PC端的话，css中的1px就等于一个物理像素；
2.逻辑像素：这个概念主要针对移动端，移动端开发的话，1px就是一个逻辑像素；
3.像素比（dpr）：物理像素/逻辑像素。在移动端可以通过window.devicePixelRatio来获取设备的像素比，这个值针对设备来说是固定的，同一个品牌的同一个机型也是相等的。
因为电子产品显示的是物理像素，在PC端1px都是1px。但是在移动端，物理像素=dpr*逻辑像素（css像素）,因为像素比这个因子的不同，会产生1px的像素问题，也就是说你给某个元素加1px的border，在不同的设备的粗细是不一样的，像素越大会越明显。那么我们怎么来解决这个问题呢？

思路：
①我们都知道有个<meta name="viewport" content="width=device-width,initial-scale=1.0>来控制字体的适配，其中initial-scale是指缩放的比例，在PC端是固定的都是1.0；但是在移动端，我们可以通过window.devicePixelRatio来获取设备的像素比后，设置缩放initial-scale=1/dpr，然后动态添加这个属性给html，某宝移动端适配就是这样做的。
②rem:基于根元素（html）的一种字体，假设你的根元素设置了1rem=16px；那么其他地方用这个都会基于这个比例来转换；还有一种（em）这个是基于父级元素；
③通常基于webpack开发的话，如果我们不想自己根据设计稿来转换的话，可以通过px2rem 这个插件来协助你进行转换，在移动端你只需根据UI图的设计来写px即可，
假设你的UI图是依据iPhone 6 750px来设计的；

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}

④但是如果你的移动端采用了UI库，因为UI库是用px写的，通常加了动态加了<meta name="viewport" >后，在dpr>1的设备上会变小，网上很多开发者说使用px2rem-exclude后忽略ui库的rem转换，其实他们没搞懂变小是什么原因造成的，而用这个插件是丝毫没有任何作用的。唯一的方法就是改写你的UI库的字体大写。