浏览器视口

css单位

在css中我们会使用到许多单位，如px，em，rem，vw，vh等等
整体上，我们可以将它们分成两类

相对单位

相对单位即本身的值是需要依靠其他元素计算得出的
如rem，em都需要依赖font-size属性值来计算结果
使用相对单位的好处是经过仔细规划，可以使文本或元素的大小在不同页面大小下能相适应

绝对单位不需要依赖其他属性来计算自我的值，他们的值通常被认为是相同的大小
即1px默认总是占用一个屏幕像素的大小
常见的绝对单位有px，pt，cm，in等

我们知道，一张图片通常是由像素构成
像素也是影响显示的基本单位
更深入的来说，像素单位可以有三种像素的名称

又称为设备像素，即设备本身的像素，譬如屏幕的分辨率，代表了这块屏幕是由多少个像素组成的
无法通过后天程序编程等方式更改

因为每个人的屏幕分辨率不同，所以同样大小的元素在不同分辨率下的显示结果并不相同
导致开发者必须花费很多时间来进行适配
而逻辑像素就是对设备像素的一层抽象
逻辑像素的大小可以通过操作系统设置分辨率来更改

而css像素就是我们平常在css中写的像素px
默认情况下是等于我们的逻辑像素

即设备像素比
2010年的时候iPhone4推出，同时也带来了Retina屏幕
在Retina屏幕中，一个逻辑像素对应着多个物理像素，这个比例被称之为DPR
DPR值越高，显示的效果越好
可以通过window.devicePixelRatio获取当前屏幕的DPR值
DPR

即每英寸像素，通常用来表示一英寸大小中能放下多少个像素
多用于工业领域

在一个浏览器中，我们所看到的区域就是浏览器的视口
视口能划分成以下几种情况
值得注意的是，在pc端不存在这种情况，下面三种视口只适用于移动端

在移动端浏览器中，网页会被浏览器放在一个长为980px的盒子中布局
因为移动端本身的网页窗口往比较小，所以浏览器为了能把980px大小的内容都放入窗口中就会对盒子进行缩小
我们将相对于980px布局的视口称之为布局视口
布局窗口

即移动端浏览器能看到的区域，这个区域的大小通常跟设备的逻辑像素相关联
视觉窗口

当布局视口的大小等于视觉视口的大小时，我们就称之为理想视口
我们可以通过缩放布局视口来达到理想视口
我们可以通过修改meta元素的viewprot属性来控制布局视口
以下是一个简单的例子

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在content中我们可以设置以下几个值

值	可能的附加值	描述
width	一个正整数，或者字符串 device-width	定义 viewport 的宽度
initial-scale	一个 0.0 和 10.0 之间的正数	定义设备宽度与 viewport 大小之间的缩放比例
height	一个正整数，或者字符串 device-height	定义 viewport 的高度。未被任何浏览器使用
maximum-scale	一个 0.0 和 10.0 之间的正数	定义缩放的最大值，必须大于等于 minimum-scale，否则表现将不可预测
minimum-scale	一个 0.0 和 10.0 之间的正数	定义缩放的最小值，必须小于等于 maximum-scale，否则表现将不可预测
user-scalable	yes 或者 no	默认为 yes，如果设置为 no，将无法缩放当前页面。浏览器可以忽略此规则