width 是可视窗口宽度 … device-width 是设备宽度 … 在响应式的网页设计里面 … width ，是经常用到的媒体特性 ….

一般我们会用它去设置网页的 breakpoint … 也就是断点 … 去触发不同宽度范围内的样式 ….

下面我们还是先来了解下这个媒体特性的使用 …

设置媒体查询

打开网页的样式表 … @media(){} …

width 这个媒体特性支持使用 max 和 min 前缀 … 这个媒体查询的表达式，我们可以这样 … max-width: 767px …

意思就是，可视窗口宽度小于等于 767px ，表达式会返回真的假 … 这样就会触发在后面大括号里设计的 CSS 样式 …

在大括号里，加点 CSS 样式 … 这里我们把背景颜色设置成了一种紫色...

@media (max-width:767px){
body{
background:#c36cea;
}
}

保存 … 打开浏览器 ….

调整一下可视窗口的宽度 …. 当我们把可视窗口宽度缩小到 767px 的时候 … 会触发刚才在媒体查询里设置的样式 … 背景会变紫色 …

继续缩小宽度 …. 会使用同样的紫色背景 …

因为我们在 width 这个媒体特性的前面，加上了一个 max 前缀 … 所以小于等于 767px 的可视窗口宽度，都会应用在媒体查询里设计的样式 …

打开 iOS 模拟器 .. 垂直方向的 iPhone ，可视窗口宽度是 320px …. 小于 767px … 所以也会使用紫色的背景 …

设置成水平方向 … 宽度会变成 480px .. 同样小于 767px … 背景仍然会是紫色 ….

device-width

下面我们再去试一下 device-width 这个媒体特性 … 它可以判断设备的整体宽度 … 回到样式表 …

把 max-width … 修改成 max-device-width …

这样这个表达式，在设备的宽度小于等于 767px 的时候，会返回真的值 …

保存 …

先回到浏览器 … 刷新 …

因为我的电脑屏幕的宽度大于 767px .. 所以，刚才设置的媒体查询的表达式会返回假的值 … 也就不会应用紫色的背景 …

你会发现，不管我们怎么样去调整可视窗口的宽度 … 样式都不会发生改变 … 因为 device-width 是判断设备宽度的媒体特性，而不是可视窗口的宽度 ….

再打开 iOS 模拟器 … 这个 iPhone 设备 的宽度是 320px ，小于 767px … 所以会应用紫色的背景 ….

我们再把设备，设置成 iPad 试一下 …

因为这个 iPad 的宽度是 768px … 大于了我们设置的 767px … 这样表达式会返回假值 … 也就不会应用紫色的背景 …