我们经常见到用 K和 P这个单位来形容屏幕:
P代表的就是屏幕纵向的像素个数, 1080P即纵向有 1080个像素,分辨率为 1920X1080的屏幕就属于 1080P屏幕。
我们平时所说的高清屏其实就是屏幕的物理分辨率达到或超过 1920X1080的屏幕。
K代表屏幕横向有几个 1024个像素,一般来讲横向像素超过 2048就属于 2K屏,横向像素超过 4096就属于 4K屏。
四、视口
视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。
一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口,它们在屏幕适配中起着非常重要的作用。
4.1 布局视口
布局视口( layout viewport):当我们以百分比来指定一个元素的大小时,它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时,它就是基于布局视口来计算的。
所以,布局视口是网页布局的基准窗口,在 PC浏览器上,布局视口就等于当前浏览器的窗口大小(不包括 borders 、 margins、滚动条)。
在移动端,布局视口被赋予一个默认值,大部分为 980px,这保证 PC的网页可以在手机浏览器上呈现,但是非常小,用户可以手动对网页进行放大。
我们可以通过调用 document.documentElement.clientWidth/clientHeight来获取布局视口大小。
4.2 视觉视口
视觉视口( visual viewport):用户通过屏幕真实看到的区域。
视觉视口默认等于当前浏览器的窗口大小(包括滚动条宽度)。
当用户对浏览器进行缩放时,不会改变布局视口的大小,所以页面布局是不变的,但是缩放会改变视觉视口的大小。
例如:用户将浏览器窗口放大了 200%,这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大,这时一个 CSS像素会跨越更多的物理像素。
所以,布局视口会限制你的 CSS布局而视觉视口决定用户具体能看到什么。
我们可以通过调用 window.innerWidth/innerHeight来获取视觉视口大小。
4.3 理想视口
布局视口在移动端展示的效果并不是一个理想的效果,所以理想视口( ideal viewport)就诞生了:网站页面在移动端展示的理想大小。
如上图,我们在描述设备独立像素时曾使用过这张图,在浏览器调试移动端时页面上给定的像素大小就是理想视口大小,它的单位正是设备独立像素。
上面在介绍 CSS像素时曾经提到 页面的缩放系数=CSS像素/设备独立像素,实际上说 页面的缩放系数=理想视口宽度/视觉视口宽度更为准确。
所以,当页面缩放比例为 100%时, CSS像素=设备独立像素, 理想视口=视觉视口。
我们可以通过调用 screen.width/height来获取理想视口大小。
width=device-width 也就是说将layout viewport 的宽设置ideal viewport 的宽度