宽度与视口
当我们对媒体查询使用 width 时，正确设置元标记很重要。基本元标记看起来像这样，它需要放在 <head> 标签内。
<meta name="viewport" content="width=device-width,initial-scale=1">
为什么这很重要？
基于 MDN 的定义宽度是
宽度媒体功能描述输出设备的渲染表面的宽度（例如文档窗口的宽度，或打印机上页面框的宽度）。
那是什么意思？
View-port 是设备本身的宽度。如果屏幕分辨率显示分辨率为 1280 x 720，则视口宽度为 1280px。
更常见的是，许多设备分配不同的像素量以显示一个像素。例如，iPhone 6 Plus 的分辨率为 1242 x 2208。但实际的视口宽度和视口高度为 414 x 736.这意味着 3 个像素用于创建 1 个像素。
但是，如果你没有正确设置 meta 标签，它将尝试以其原始分辨率显示你的网页，从而导致缩小视图（较小的文本和图像）。