一、像素 - 什么是像素
在web前端开发领域，像素有以下两层含义：
-
设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
-
CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。
总结
-
web前端领域，像素分为设备像素和CSS像素
-
一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。
二、移动端的三个视口
布局视口：移动端CSS布局的依据视口，即CSS布局会根据布局视口来计算。
可以通过以下javascript代码获取布局视口的宽度和高度：
-
document.documentElement.clientWidth -
document.documentElement.clientHeight
第二个视口：视觉视口
能看到的部分就是视觉视口
第三个视口：理想视口
理想视口，这是我们最需要关注的视口，现在我们来回顾一下我们知道了哪些视口，有两个，分别是：布局视口，视觉视口。
手机浏览器要把布局视口设为理想视口：
-
<meta name="viewport" content="width=device-width" />
上面那段代码告诉浏览器：将布局视口的宽度设为理想视口。
移动端的三个视口介绍完了，让我们总结一下：
-
在PC端，布局视口就是浏览器窗口
-
在移动端，视口被分为两个：布局视口、视觉视口。
-
移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）
-
可以将布局视口的宽度设为理想视口
三、设备像素比(DPR)
-
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
-
iPhone5的理想视口是：320*568 <==> device-width = 320，device-height = 568
-
iPhone5的设备像素比：2
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
缩放：缩小放大的是 CSS像素。
meta视口标签存在的主要目的是为了让布局视口和理想视口的宽度匹配
共有5个：
-
width：设置布局视口的宽
-
init-scale：设置页面的初始缩放程度
-
minimum-scale：设置了页面最小缩放程度
-
maximum-scale：设置了页面最大缩放程度
-
user-scalable：是否允许用户对页面进行缩放操作
媒体查询是响应式设计的基础，他有以下三点作用：
-
检测媒体的类型，比如 screen，tv等
-
检测布局视口的特性，比如视口的宽高分辨率等
-
特性相关查询，比如检测浏览器是否支持某某特性（这一点不讨论，因为它被目前浏览器支持的功能对于web开发来讲很无用）
css中使用媒体查询的语法：
@media 媒体类型 and (视口特性阀值){
// 满足条件的css样式代码
}
适应所有的设备，我们应该用javascript代码动态生成meta标签：
let scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘width=device-width,initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
rem是相对尺寸单位，相对于html标签字体大小的单位：
如果html的font-size = 18px;
那么1rem = 18px，需要记住的是，rem是基于html标签的字体大小的。
1、将布局视口大小设为设备像素尺寸：
var scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘width=device-width,initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
2、动态设置html字体大小：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;
3、将设计图中的尺寸换算成rem
元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值