移动端适配问题

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

思路：
①我们都知道有个后，在dpr>1的设备上会变小，网上很多开发者说使用px2rem-exclude后忽略ui库的rem转换，其实他们没搞懂变小是什么原因造成的，而用这个插件是丝毫没有任何作用的。唯一的方法就是改写你的UI库的字体大写。