视口（viewport）原理详解之第一部分

Posted 2020-06-19 很好玩的博客

　　在这篇文章中，我将解释viewports和元素width是如何工作的，比如html元素、  window和 screen。

　　这篇文章主要针对桌面浏览器，但它的部分和移动设备中的结论也比较类似，所以也是为下篇移动端viewports详解做准备。

一、设备像素和CSS像素

　　设备像素提供了我们操作设备的一个正规的分辨率，可以用screen.width/height获得。

　　如果你给某个元素宽度设为128px,设备宽度1024px,默认浏览器最大化，这事，元素将占据屏幕宽度的1/8。如果用户缩放，那么这个比例将会变化。如果用户放大到200%，这个128px的元素将占据屏幕的1/4。

　　在移动设备中进行缩放不过是拉伸或者压缩像素。元素宽度不会从128px变为256px，而是元素的每个像素在屏幕上的长、宽均放大了2倍，整体面积扩大了4倍。实际上，元素宽度还是128px，虽然他实际占据了256px的屏幕大小。

　　我们下面用图片来解释一下：

1.CSS像素完全覆盖设备像素

2.缩小，CSS像素占不满设备元素

3.放大，1css像素占据多个设备像素

　　说了这么多，其实我们只需要关心CSS像素即可，只有这些才会影响我们样式表的渲染。在用户缩放或者拉伸时，浏览器会自动的拉伸或者缩放你的网页布局。