每一个设备的宽度都是不一样的。 ``` 解决： 1. 把视觉稿中的px转换成rem 2. 使用栅格系统 3. 使用flexible(将页面分为100份，每一份为一个单位a，1rem=10a，1a=7.5px，1rem=75px ``` ### **概念：** ### **一、两种像素** 1、物理像素（设备像素，device pixels） 指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。 2、CSS 像素（CSS pixels） ### **二、三种视口** #### **1、布局视口** 布局视口的**宽度/高度**可以通过`document.documentElement.clientWidth / Height`获取。 默认的布局视口宽度为 980px #### **2、视觉视口（设备宽度）** `screen.availWidth;` #### **3、理想视口** 即是布局视口的宽度等于设备独立像素；通过`<meta name="viewport" content="width=device-width"/>` #### **3.1、完美视口** `<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/> ` **width=device-width**：设置布局视口的大小等于设备独立像素； **initial-scale=1.0**：设置布局视口和视觉视口的大小等于设备独立像素； **user-scalable=no**：不允许用户进行缩放； **minimum-scale和maximum-scale** 分别这只最小的缩放为1.0，最大的缩放为1.0，表示不允许用户进行缩放操作。 ### **三、设备像素比** `window.devicePixelRatio` ### **四、设备独立像素**