CSS之viewports剖析
分类:
文章
•
2024-09-10 18:35:04
1.设备的pixels和CSS的pixels
首先你应当理解CSS的pixels，以及它和设备的pixels的区别
我们姑且认定设备的pixels为标准的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。在大多数情况下，能够从screen.width/height上取出具体值
如果用户缩放（zoom）了浏览器，当然必须改变计算方式。例如用户缩放了200%，上诉显示器只能横排容纳4个上诉元素了
现代浏览器上的缩放的结果是，html元素上的宽度并没有因为缩放200%而由128pix变成256px，而是真实的pixels的被计算成了双倍。html元素在形式上依然是128CSS的pixels，即便它占用了256设备的pixels
换言之，缩放200%将一个单位的CSS的pixels变成了4倍的设备的pixels那么大，即宽度 * 2、高度 * 2，面积扩大了2 * 2
下列图片将清楚的解释这个概念。如图1-1.有4个1像素，缩放为100%的html元素，CSS的pixels完整的和设备的pixels重叠
当我们缩小浏览器时，CSS的pixels开始收缩，导致1单位的设备的pixels上容纳了多个CSS的pixels
同理，放大浏览器时，相反的事情发生了，CSS的pixels开始扩大，导致1单位的CSS的pixels上容纳了多个设备的pixels
总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染
2.100% 缩放
在缩放级别为100%时，1单位的CSS的pixel是严格相等于1单位的设备pixel
在桌面系统上，你通常会在100%缩放级别下测试你的网站，但即便用户缩放，CSS的pixels的魔法依然能保证你网站外观保存相同的比例
3.屏幕尺寸 Screen size
screen.width/height：用户的屏幕的完整大小
我们先了解一些特殊的尺寸：screen.width 和 screen.height。这两个属性包含了用户屏幕的完整宽度高度。这些尺寸使用设备的pixels来定义，他们的值不会因为缩放而改变：他们是显示器的特征，而不是浏览器
4.浏览器尺寸 Window size
window.innerWidth/Height：包含滚动条尺寸的浏览器完整尺寸
你想要知道的浏览器的内部尺寸。它定义了当前用户有多大区域，可供你的CSS布局占用。你可以通过window.innerWidth 和 window.innerHeight来获取
5.滚动移位 Scrolling offset
window.pageX/YOffset：页面的移位
window.pageXOffset 和 window.pageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离
原理上来说，在用户放大浏览器时，向上滚动了页面，window.pageX/YOffset会改变。但当用户放大页面时，浏览器会尝试着保存用户当前可见的页面的元素依然在可见位置。虽然该特性表现得不如预期，但它意味着：在理论上 该情况下 window.pageX/YOffset并没有改变，被用户滚出屏幕的CSS的pixels几乎保存不变
6.视窗 viewport
viewport的功能在于控制你网站的最高块状（block）容器：<html>元素
听起来有点玄乎，举个例子~假设你定义了一个可变尺寸的布局（liquid layout），且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？
那么异常情况就是父元素的宽度究竟是多少？通常，一个块级元素占有起父元素的100%的宽度（这里如果有异常情况，暂时忽略）。所以的宽度就是其父元素<html>的宽度
那么<html>元素到底有多宽？因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。所以的web开发人员都直观的知道和使用该特性了。 但是你也许不知道原理。在原理上，<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%
反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是为浏览器窗口的宽度高度 – 在桌面浏览器上如此，移动设备浏览器上有点复杂
