面试中关于响应式布局的一个经典问题：
如何解决1px线在不同的设备切换时显示的宽度不同
产生这个问题的根本还是因为dpr的存在，当手机屏幕的dpr是2或者3时，所在dpr越大，精度越高，则对应的线越粗
举个栗子
假设我们要在屏幕上设置一个width=100px，height=100px，边线为1px的正方形
我们可以通过一个after伪类为该正方形建立边线
当dpr为1时，边线在屏幕上正常显示
当dpr为2时，边线在屏幕上显示为1pt即2px，正方形还是那个正方形，但它的边线却变粗了
这种情况对我们的页面美观有很大的影响
那么假设现在屏幕的dpr为2，如何在不改变元素宽高的情况下将边线变为正常大小呢？
我们只需要将对应的宽高按百分比放大为dpr的倍数,
然后再通过transform中的scale缩小为当前的0.5倍数
这样当前的正方形的大小并未改变，但相当于对边线进行了【挤压】
使边线的宽度变为原来的一半，恢复到了正常的1px；
代码如下
这个问题就可以完美解决了
按此思路，我们能否结合媒体响应式设计，实现在不同动设备之间切换的时候，通过样式进行检测dpr，实现布局的自适应呢？
首先回顾一下【媒体查询】的定义
媒体查询可以让我们根据设备显示器的特性（如视口宽度，屏幕比例，设备方向：横向或纵向）为其设置css样式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
按此思路笔者在此提供一个可以兼容所有设备（安卓，苹果）兼容所有浏览器（火狐ie）的自动侦测并响应式布局的方法
转换为css代码如下
这种方式可以实现仅由样式实现自适应，不需要js的参与，从而优化了性能
其中用到了两个概念
（max-resolution）———-最大像素密度
安卓的单位是dpi 苹果对应的单位是dppx
（max--moz-device-pixel-ratio）————dpr临界点
对于临界点的概念，我们在此引入一张图进行说明
在这里我们的对应关系为
1.49=>dpr为1的临界点
1.5=>2.49 dpr为2的临界点
2.5=>dpr为3的临界点
这里的【完美】解决是指目前为止笔者发现的兼容性比较全面的方法，日后在学习过程中有更好的办法出现，会持续进行更新
