两种像素
物理像素：
- 实际硬件拥有的像素点，如1920x1080屏幕就横向拥有1920个像素点，纵向拥有1080个像素点
- 设置屏幕分辨率，就是设置像素点的利用情况，如设置800x600后出现黑边，就是有像素点未利用
CSS像素
- 编写网页时，设置的是CSS像素，浏览器将CSS像素转换为物理像素后显示
- 一个CSS像素由多少个物理像素显示，视具体情况定，默认情况下1个CSS像素=1个物理像素，如PC端100%显示网页，而放大后1个CSS像素可能由多个物理像素显示
/*浏览器放大500%后1px的显示效果*/
/*截图工具中小点的大小代表一个物理像素*/
.box1{
border:1px solid red;
}
通过视口查看CSS像素和物理像素的比值
- 以1920x1080的显示器为例，为方便仅讨论宽度，因为CSS像素和物理像素比值改变时，实际会改变宽度和高度两个方面，如从1:1变为1:3时，1个CSS像素需要3x3=9个物理像素来显示
- CSS像素和物理像素的比值，就是视口像素:物理像素
- 1920x1080的显示器，其物理像素恒定不变，就是1920个
- 浏览器缩放比例为100%时，通过视口中html根标签的样式，可知CSS像素为1920个，两者比例为1:1
- 缩放比例调整至200%，html像素为960个，二者比例1:2，利用2个物理像素显示1个CSS像素
移动端加载PC网页
- 对于物理像素较少的移动设备，默认情况下，浏览器会将视口设置为980的CSS像素，以确保PC端网页能在移动端正常显示，若网页的宽度超过980px，会进行缩放
- 可见，默认情况下，移动端的像素比为：980/移动端设备的物理像素，一个物理像素需要显示超过1个CSS像素，网页会变得非常小
- 由于PC端网页在移动端的浏览效果并不好，大部分网站需要另外为移动端开发网页
移动端开发：完美视口
- 编写移动端网页时，需要确保一个较为合理的像素比，通常是1个CSS像素:2个物理像素，或者1:3，利用多个物理像素显示一个CSS像素，才有好的显示效果
- psd设计图的宽度以750px和1125px居多，就是符合了1:2、1:3的比例
- 由于物理像素已经确定，只能通过修改CSS像素改变像素比，即修改视口的像素，通过meta标签设置视口的大小
<meta name="viewport" content="375px">
- 每款移动设备都有自己的最佳像素比，在此像素比下显示效果最佳，此时的视口称为完美视口，通过修改meta标签的content设置
<mate name="viewport" content="width=device-width,initial-scale=1.0">
移动端适配：vw单位
- 每款设备都有自己的完美视口，若开发时以px为单位，同样是375px的导航条，会出现在iPhone6上完美显示，而在iPhone6plus上存有空白
- 移动端开发时采用新的长度单位vw，即viewpoint width，100vw=一个视口的宽度，1vw=1%的视口宽度，采用vw为单位的网页，在不同设备的显示效果相同
.box1{
width:100vw;
}
- 对于一张750px的设计图，由于设计图就是设备显示的最终效果，即视口所见，可知100vw=750px，0.133333vw=1px，若要实现设计图里48x35的部分，通过计算知代码中应为6.4vw和4.667vw
- 上式换算方法较为麻烦，可通过设置html的font-size以vw为单位，网页中再以rem为单位设置长度
- 注意html最小的font-size是12px，应设置足够大的vw
/*假设此时0.133333vw=1px*/
/*取整，5.333vw=40px=1rem*/
/*设置设置图中48x35部分只需设置除以40后的rem*/
/
html{
font-size:5.333vw;
}
.box1{
width:1.2rem;
height:0.875rem;
}
