在 CSS 中使用 LESS 实现更多功能（3）创建响应式设计

look_w

创建响应式设计在 2010 年，许多 Web 设计人员开始倡导一种称为 响应式设计 的页面设计方法。从一开始，就需要构建灵活的 Web 页面，在从小型手机到比常用台式机更大的显示设备中查看它们。
响应式设计的核心是 CSS3 媒体查询，该查询是一种根据用户显示器的性质（特别是尺寸）来调用 CSS 规则的标准方式。LESS 使我们能够更容易地展现使用媒体查询来实现响应式设计的 CSS。出于演示之目的，我将 developerWorks 博主 Bob Leah 的优秀响应式设计   的一个 LESS 版本组合起来。在文章的代码包（参见  ）中，它是 responsive.less。
运算符responsive.less 中的一项关键技术是使用变量设置基本的方框大小，然后根据可视区的大小调整方框。我使用 LESS 运算符来进行缩放。例如，清单 7 中的代码段使用乘法运算符来缩放横幅图像：
清单 7. LESS 中乘法的使用

1 2 3 4

#banner img { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); }

在   中，@bannerwidth 和 @mainheight 是根据 @scale 因子缩减的默认值。最新的 LESS 版本要求您将包含运算符的所有表达式放在圆括号中，以避免语法混淆。
嵌套规则LESS 最有用的功能之一是嵌套 CSS 规则。嵌套规则有助于您以简单易懂的方式组织代码。在清单 8（responsive.less 中的一段经过修改的摘录片段）中，我在媒体查询内嵌套了通用的 CSS 规则：
清单 8. LESS 中嵌套规则的使用

1 2 3 4 5 6 7 8 9 10 11 12 13

@media (min-width: 401px) and (max-width: 800px) { @scale: 0.75 #banner { width: (@bannerwidth * @scale); } #banner img {    max-width: (@bannerwidth * @scale);    max-height: (@mainheight * @scale); } #main { width: (@mainwidth * @scale - @extrabuffer); } #main-content {    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);    float: left; } }

  中的嵌套规则等同于清单 9 中多个独立的 CSS 规则：
清单 9. 等同于清单 8，但无嵌套规则

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@scale: 0.75 @media (min-width: 401px) and (max-width: 800px) and #banner {   width: (@bannerwidth * @scale); } @media (min-width: 401px) and (max-width: 800px) and #banner img { { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } @media (min-width: 401px) and (max-width: 800px) and #main {   width: (@mainwidth * @scale - @extrabuffer); } @media (min-width: 401px) and (max-width: 800px) and #main-content {    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);    float: left; }

  中的版本没有提供这些密切相关规则的自然分组，而且还因为反复指定媒体查询而违反了 DRY（不要重复自己）原则。
mixinsLESS 减少重复的另一种方式是让您指定可添加到其他规则中的一组规则。在 responsive.less 中，我使用了此 mixin 技术来跨两个不同的媒体查询表达常见规则，如清单 10 所示：
清单 10. LESS 中 mixins 的使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.media-body (@scale: 0.75) { #banner { width: (@bannerwidth * @scale); } #banner img {    max-width: (@bannerwidth * @scale);    max-height: (@mainheight * @scale); } #main { width: (@mainwidth * @scale - @extrabuffer); } #main-content {    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);    float: left; } #widget-container {    width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);    float: right; } .widget-content {    width: (@widgetinwidth * @scale * 0.75 - @extrabuffer); } } //Rules for viewing from 401px to 800px @media (min-width: 401px) and (max-width: 800px) { .media-body; } //Rules for viewing smaller than 400px @media (max-width: 400px)  { .media-body(0.3); //Extra manipulation of some rules #main-content { padding: 0px; } #widget-container { width: padding: 0px; } .widget-content { margin: 5px; } .widget-text { display: none; } }

Mixins 可以接受参数，比如   中方框大小的比例因子。默认的比例因子是 0.75 。  在可视区中使用从 401px 到 800px 的默认大小。为了在小于 400px 的尺寸下进行查看，比例因子被更改为 0.3 ，并且在该区域添加了一些额外规则。
图 2 显示了 responsive.html 的浏览器显示，它使用了 responsive.less。我减小了浏览器的宽度，以满足小于 400px 的宽度的媒体查询，这样一来您就可以看到页面在小型移动设备上是什么样子。
图 2. responsive.html 的低宽度浏览器输出在我 Mac 上的 Safari 中，当浏览器宽度接近 500px 时，小于 400px 的宽度的媒体查询被触发。该行为引出了一个重要观点。媒体查询基于视区 这一概念。视区是可视浏览器空间的数量，用 CSS 像素进行定义，并通过设备和浏览器进行确定。CSS 像素不同于设备像素；例如，如果用户缩放浏览器视图，那么像素模型之间的关系就会发生变化（参见  ）。此外，设备和浏览器设置的视区大小不同于实际显示的窗口大小。在   中就是如此：窗口大约是 500px，但 CSS 将其作为 400px 宽的视区加以处理。这一现象强调了这样一个事实：与所有 Web 开发技术一样，响应式设计需要完善的跨设备测试。