关于网页的屏幕适配

物理像素、逻辑像素与CSS像素

物理像素：屏幕能用于显示的最小物理硬件单元，在windows显示设置中的推荐分辨率即物理像素。
逻辑像素：屏幕实际显示时的最小单元，电脑屏幕一般与物理像素相等，手机由于尺寸较小，一般一个逻辑像素代表3个物理像素，即设备像素比（window.devicePixelRatio），chrome模拟器中的375指逻辑像素。
CSS像素：网页显示的度量单位，一个CSS像素等于一个物理像素（重点）

产生的问题

由于CSS像素等于物理像素，PC端项目直接在移动端查看会特别的小，其他html、css、js中关于尺寸像素部分的知识，都是以CSS像素即物理像素为准的

解决方案

1. 媒体查询@media：可以根据屏幕类型或者可视区域的CSS像素宽度定制样式
2. viewport：下列代码相当于会将视窗(viewport)设置成屏幕的宽度，约等于html {width:375px}，然后不允许缩放，初始缩放为1，相当于只利用了手机物理像素的一部分，此时的像素比与PC相同，都为1。
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
3. 放大或缩小，根据逻辑像素的定义，将PC的所有尺寸除以devicePixelRatio，或者viewport初始缩放设为devicePixelRatio（不可取，结果不正确且有横向滚动条）
4. 根据百分比设置盒子宽度，同时文字等应该变大，所以比较麻烦
5. 使用rem单位，由于1rem等于根节点的font-size，根据不同设备设置根节点的font-size，效果同所有尺寸除以devicePixelRatio，但更方便。不需要设置width=device-width，注意此时的@media或这其他宽度判断应该以物理像素为准

例子

常用方案：rem方案，就两点，一、根据屏幕设置font-size，比如PC端为16，移动端为16*devicePixelRatio，则能达到整体变大的效果，然后是px转rem的插件方便编程