了解viewport 和 px

相对长度单位：px em rem

什么是屏幕尺寸

指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

什么是屏幕分辨率

指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素横向像素来表示一个手机的分辨率，如19601080。（这里的1像素值得是物理设备的1个像素点）

什么是屏幕像素密度

屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

计算屏幕像素密度

勾股定理算出对角线的分辨率：√(1920²+1080²)≈2203px

对角线分辨率除以屏幕尺寸：2203/5≈440dpi。

以上是单位的介绍，下面再来认识个重要的知识点：viewpoint。

<meta name ='viewport' content='width =device-width,inital-sacle=1.0,maximum-scale=1.0,user-scalable =no;/>

添加正确的viewport 页面尺寸可根据设计稿上的尺寸来设计.png

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。

image.png