css像素和viewport

概念

css像素：编写代码时给定的像素大小

viewport：虚拟视口，显示网页的区域，设置当前的分辨率可显示多少css像素，调节css像素与物理像素之间的关系

屏幕分辨率：屏幕实际的分别率，同样物理大小的屏幕，分辨率越高，单位长度内的像素越多。

屏幕尺寸：屏幕的实际尺寸大小

devicePixelRutio:viewport与物理分辨率之间的比值。

可视区域：屏幕中显示网页的大小，随着窗口大小改变。

理想视图：可以使网页无论在哪种不同的屏幕上显示的内容都可以让使用者得到一个良好的可视效果（内容不会偏大偏小，不需要手动放大缩小滑动滚动条才能达到良好的可视效果）

他们之间的关系

当devicePixelRutio=1时，css像素和物理像素之间的关系是1：1，

在pc端查看，宽高为100px的块

在移动端查看，宽高为100px的块

为了使手机一次可以显示更多的内容，设计出了显示分辨率的，尺寸不变的情况下使范围的像素块增多（单位像素大小变小），并且将viewport设置为默认980px，使一个物理像素表示了多个css像素，导致内容全部都挤在了一个小的移动端屏幕中。如果要看详情内容只能手动放大和拖拽滚动条才行。

为了确保移动可以拥有一个合理的视图大小需要设置物理像素和css像素的关系，1个css对应2个或3个物理像素可以通过meta设置viewport实现

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

由于设备的不都相同如果width设置一固定的值无法达到每个设置都有一个合理的视图，所以设计出了理想视图。

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