像素以及viewport

像素

---

• 屏幕由一个一个发光的小点构成。这一个一个小点就是像素
• 我们一般说的分辨率其实就是 屏幕中小点的数量
• 在整个前端开发中，像素大致分为两种：物理像素以及css像素
  • 物理像素一般就是指的我们屏幕的分辨率
  • css像素 就是指的我们缩写的代码中的像素

• 以下就是电脑显示的分辨率

• 以下是 html 显示元素像素大小

  通过上述结论可以得到，在 PC 端中 css 像素 跟 物理像素比 其实是 1：1 的关系（比如：以1920像素为例。不包含缩放）

视口

• 视口就是屏幕中用来显示网页的区域
• 可以通过查看视口的大小，来观察 css 像素和物理像素的比值

• 默认情况下：

  • 视口的宽度是：1920px css 像素/ 1920px 物理 像素
  • 所以默认情况下 css 像素以及物理像素的比例是 1：1

• 放大两倍的情况下：

  • 视口宽度是：960px css 像素 / 1920 物理像素
  • css 像素：物理像素 = 1：2

• 上述是两倍情况下的 视口大小。浏览器放大，可视区变小的

• 所以越放大，所谓的视口就会越小（例如：本来默认视口像素个数是1920个，现在只有960个）
• 约缩小，所谓的视口就会越大（例如：本来默认视口像素个数是1920个，现在只有3840个）

默认适配问题

问题：一个宽度为 900px 的网页在 iPhone5 中如何显示

• html 代码中不写viewport情况下，移动端能显示最大宽度是 980
• 移动端默认的宽度都是 980。为了能够很好的是因 pc 端的网页。会将 pc 端的网页都显示出来
• 如果出现了 pc 端网页宽度大于 980 的话，会按一定比率进行缩放

meta 以及完美视口

不设置meta属性的情况下：

• 移动端默认的视口大小就是 980px (css 像素)
  • 默认情况下的像素比就是 视口大小/ 移动端宽度 =》 默认以 750 为例。默认就是 980/ 750
  • 如果我们直接在网页种编写移动端代码的话，这样在 980 的视口下，像素比会非常不好，导致网页中的内容会非常小
  • 所以在编写移动端的时候，就需要设置一个合理的像素比
  • 像素比：视口大小(可变的)/ 移动端宽度(不可变的)

设置meta属性的情况下：

• 其实可视区的宽度是可以修改的。比如：

<meta name="viewport" content="width=100px" />

• 此时设备宽度是：375px; 可视区的宽度是：100px; 此时像素比就是：1：3.75(css 像素：设备像素)

• 可以理解为如果设置 1px css 像素的话，如果显示到手机上需要按照这个比例进行转换

• 如果一个 div 设置宽度 100px 的话。按照这个比例转换后 实际的宽度就是 375px 了

• 其实我们也可以将 viewport 的 width 设置为别的值。例如：<meta name = "viewport" content = "width=375px" />

  • 虽然可以设置固定值，但是只在 375/ 750 设备上会有比较好的效果。但是如果到了更加宽度的设备上用户体验会变差

其实经过一系列验证后 我们会发现不同的手机可视区宽度不同。同时也可以设置不同的可视宽度

什么是完美视口呢？？？就是不同的设备设置最佳的像素比呈现的视口 就叫完美视口

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

• 我们可以通过上述标签meta viewport width=device-width 来设置完美视口
• 变量device-width 会根据不同设备 呈现不同视口大小