共计 744 个字符，预计需要花费 2 分钟才能阅读完成。
像素
物理像素
屏幕上的像素点，单位物理像素在图像中不可再宰割
逻辑像素（css 的 px 像素）
css 中 px 单位示意的像素，1px 不肯定就等于 1 个物理像素，不同的设施换算可能不同
如果设施 1px 等于两个 2 个物理像素，则 50px
*50px 的图片理论物理像素应该是 100*100，即有 10000 物理像素点组成，如果小于这个值，则视觉上图片看起来含糊。
设施像素比
1px 对应的物理像素个数称为设施像素比
视口（viewport）
布局视口(layout viewport)
window.innerHeight和 window.innerWidth 所组成的区域通常被认为是布局视口
视觉视口（visual viewport）
视觉视口指以后浏览器中可见的局部
宽度和高度的媒体查问是绝对于布局视口，即主文档（document）中的窗口（window 对象）
在 CSS 中，咱们也有基于视口大小的长度单位。1vh 单位是 1% 布局视口的高度，vw 单位与此相似
iframe 文档内基于宽度的媒体查问将会应用 iframe 的视口宽度进行参照，不是整个浏览器视口
SVG 进行媒体查问时，其参照的高度和宽度取决于包裹着 SVG 的容器，不是整个浏览器视口
挪动设施的视口
pc 浏览器的分辨率个别比挪动设施的分辨率大，为了让页面能全副在挪动设施展现，挪动设施视口宽度通常为 980px，渲染时会对页面进行缩放。比方在宽 320px 的挪动设施显示 980px 的页面，挪动设施浏览器会对这个页面进行缩放直至齐全展现。缩放会导致字体变小。
挪动端浏览器能够应用屏幕宽度替换默认的 980px 视口宽度，此时宽 320px 的挪动设施只能齐全显示 320px 的页面：
设置视口宽度为屏幕宽度：
<meta name="viewport" content="width=device-width">