响应式布局

Posted 2020-09-21

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

如果您查找响应式 CSS 文件，您会发现，在一些公共的声明后边（从行号 10 到 22），有各种以 ‘@media‘ 开始的区域。这就是如何编写适用于各种设备的样式。

第一个区域以 ‘@media (max-width: 480px)‘ 开始，为最大宽度为 480 像素的设备设置样式。

第二个区域以 ‘@media (max-width: 767px)‘ 开始，为最大宽度为 767像素的设备设置样式。

第三个区域以 ‘@media (min-width: 768px) 和 (max-width: 979px)‘ 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 ‘@media (max-width: 979px)‘ 开始。

最后两个区域分别以 ‘@media (min-width: 980px)‘ 和 ‘@media (min-width: 1200px)‘ 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。

所以，这样样式表的基本作用就是，通过使用 ‘min-width‘ 和 ‘max-width‘ 属性，来根据设备的最大宽度和最小宽度决定使用的样式。