设备像素与CSS像素，作为前端开发者，可能会对这两个概念感到困惑。css已经比较麻烦了，我们为什么还要用这两个概念来加重负担呢？他们是否有足够的应用场景？
问题引出
让我们先看两个经常发生在我们周围的案例：
当我们把window10中的缩放与布局设置为超过100%时，电脑中所有图标、文字、界面都将比100%时变得更粗，原因是什么？
另一个案例是：
当我们对网站做移动端适配时，通常会采用750设计稿，即UI设计师的设计稿中页面宽度为750px，我们写css时却要按照375px来写。这就产生一个问题：为什么会存在这种差异呢？为什么375px就能在实际设备中正常显示呢？
事实上，在以上情况下，设计师通常还会告诉我们他采用的是2倍稿，这就是说他的设计稿中750px实际上我们用CSS时应写成375px，即设计稿中的2px相当于css中的1px。当然，如果设计师本身就采用的是1倍稿，就不会有这个问题。
现在，关于几倍稿我们已经比较清楚了，那么为什么375px会刚好匹配设备的宽度，我们还不太清楚，这也是本文将要讨论的问题。
window.devicePixelRatio（dpr）
对于以上问题，我们有一个参数叫做window.devicePixelRatio可以用于解释。
当我们将问题一中PC的缩放比例设置为150%时，我们在浏览器中打印发现：
即：
设备像素与css像素的比值是1.5。
当比值是1时，css像素和设备像素刚好相等，设备的1像素恰好等于css的1像素。
当为1.5时，css的1像素需要1.5设备像素来表示，同样的样式需要占用更多的设备像素。因此，我们可以理解为什么所有的图标、布局、文字都变得更粗。虽然各软件的图标和界面并不都是css表示的，但也体现出了这一特性，可以理解了。
对于问题二，我们采用chrome的模拟器：
可以发现：
其一，模拟器中横向像素是375，这是css像素。
其二，window.devicePixelRatio值为2。
我们可以查阅到iphone6的设备像素是750 * 1334，显然刚好是375 * 667的2倍。这就表明：
iphone6的真实设备像素是750 * 1334，但由于设备的devicePixelRatio是2，css的1个像素将占据设备屏幕的2个设备像素，故css的375 * 1334将占据完一整屏。这就是我们在书写css时，需按375来写的原因。
1px问题
我们已经了解了设备像素和css像素的关系，现在我们要来看css中的一个经典问题——1px问题：
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。
原因是很显然的：
css的1px到了真机上，对于devicePixelRatio为2的设备（非常多），将占用两个设备像素，显得过宽。
解决方案不是本文讨论的主题，这里不再赘述。
结语
对于css像素和设备像素的关系，我们需要知道有一个window.devicePixelRatio在默默影响着一切，文中所举的案例都显得顺理成章。除此之外，html的meta标签中name=viewport时，content一般设置为width=device-width, initial-scale=1，这个对css又有什么影响，原理是什么，这又将是另一个重要的问题。限于文章篇幅，本文不再解释。
css博大精深，全文完。