26、移动网页设计教程：HTML与CSS实践

移动网页设计教程：HTML与CSS实践

一、理解视口和设备宽度

在编写媒体查询样式之前，我们需要先了解浏览器如何解释视口宽度值。网页是在一个称为视口的窗口中显示的。对于桌面计算机，视口就是浏览器窗口；但对于移动设备，情况有所不同。移动设备有两种视口：一种是视觉视口，用于显示适合移动屏幕的网页内容；另一种是布局视口，包含页面的全部内容，其中部分内容可能对用户隐藏。

这两种视口的存在是为了适应那些为桌面计算机设计的网站。移动设备会自动缩小页面，以便用户能看到页面的全部内容，但这通常会导致页面过小而无法使用。用户可以手动放大页面以使其在视觉视口内可读，但这样会隐藏部分内容。

媒体查询中的宽度是基于布局视口的宽度，而不是视觉视口。因此，根据页面的缩放方式，980像素的宽度可能与设备的物理宽度匹配，也可能超出它。为了使媒体查询基于设备的物理宽度，我们需要在HTML文件中添加以下元元素，告诉浏览器将布局视口的宽度与设备宽度匹配：

<meta name="viewport" content="properties" />

其中， properties 是一个以逗号分隔的视口属性及其值的列表，例如：

<meta name="viewport" content="width=device-width, initial-scale=1" />

在这个元元素中， device-width 关