使用HTML5和Less框架3的自适应Web设计

什么是响应式网页设计？这是一项相对较新的技术，由Ethan Marcotte于2010年中期在他的同名A List Apart文章中首次描述。简而言之，它涉及提供许多适合各种屏幕宽度的站点布局，然后通过使用CSS3媒体查询来相应地提供这些布局。

用杰弗里·扎德曼（Jeffrey Zeldman）的一句话来形容：

这就是我们中的一些人在1990年代追求“液体”网页设计的目的，只是它不会令人讨厌。

一切都很好，但是您如何使用它呢？毕竟，凉爽的孩子都全部做，那么为什么不应该吗？

在这个简短的教程中，我将引导您完成一个相当简单的页面设计，并在Joni Korpi的Less Framework 3的帮助下使其响应。 “阿克！” 我听到你大喊； “ CSS框架适合失败者！” 从不畏惧。用其创建者的话来说，更少只是“或多或少”的框架。这些丑陋的“ .grid-24”类都不存在，相反，您会发现四种不同的常用分辨率的一些重置样式，一些合理的印刷默认设置以及四种具有相关正文宽度的媒体查询。这四个布局包含一些有用的注释，说明如何将它们划分为对黄金比例友好的网格，但是是否这样做完全取决于您。

因此，如果您从未测试过媒体查询或响应式设计的水准，那么Less是一个很好的入门方法，可以很快地看到一些结果。您可能会希望在设计进行过程中调整媒体查询的确切详细信息，但这将很容易，因为没有“框架”负担让您失望。减少只是一个有用的起点。

所以，让我们做这个事情！

减少框架3

对于初学者，请转到http://lessframework.com/ 。该站点本身很好地说明了响应式设计的功能，因此请抓住浏览器的调整大小手柄，并查看页面如何响应各种视口大小。当您玩完后（不用担心，我可以等待），滚动到页面底部。有一些自定义选项可用，文本区域包含输出CSS和HTML框架。

就我们的示例而言，您可以保留所有默认选项为选中状态。将HTML和CSS复制到适当命名的文件中，然后在HTML文件中更新style标签的源，以指向CSS文件。

如果立即在浏览器中弹出打开HTML文件，您将看到的是页面上的一个大蓝框。调整浏览器的大小，您将看到它调整其尺寸，就像您希望的那样。有了该基准之后，就该开始在我们自己的响应式布局上进行工作了。

布局

为了便于说明，我们将列出一个简单的方法。我进行了快速的创用CC搜索，以查找一些要使用的内容。我从丽莎的厨房里找到了印度鹰嘴豆和南瓜汤的食谱。

对于我们的页面，我们希望有一个包含配方的成分和说明的主块，两个分别带有汤的图片和相关配方列表的侧边栏块以及一个注明内容来源的页脚。

Less框架提供了四个建议的网格，每个宽度对应一个。这些由60像素的列和24像素的装订线组成。最窄的布局（主要用于纵向移动设备，屏幕宽度为320px）为三列宽。接下来，针对高分辨率移动设备，狭窄的浏览器或横向模式下的移动设备，有五列布局，目标是480像素的宽度。默认的八列布局，也将提供给那些不支持媒体查询的浏览器（包括Internet Explorer），它的目标是旧的768px屏幕宽度，并且对于平板电脑和上网本也很有用。最后，有13列的布局用于1280像素以上的屏幕，包括当前大多数台式机和具有良好浏览器的笔记本电脑。

对于我们的食谱，我们将使布局非常简单。对于两种较窄的布局，我们将采用单列设计，对于两种较宽的布局，将采用两列设计（配方的图像和建议的配方在边栏中）。最宽的布局是13列60像素宽，因此我们将内容和侧边栏之间的8-5拆分。下一个最大的列是八列，我们将其拆分为5-3。

标记

因为该示例仅是说明性的，并且由于大多数SitePoint读者都使用现代的，复杂的浏览器浏览Web，所以我将使用新的HTML5语义元素作为配方的标记。这是在他们最终统治世界之前熟悉他们的一种很酷的方法。

这是一个骨架：

<body><article><header><h1>Indian Chickpea and Pumpkin Soup</h1></header><aside><img src="data:images/pumpkin_soup2.jpg" /></aside><div><p>Winter squash soups are a healthy ... </p><section><header><h2>Soup:</h2></header><ul><li>&frac34; cup dried chickpeas</li><li> ... </li></ul></section><section><header><h2>Tempering:</h2></header><ul><li>1 tablespoon olive oil</li><li> ... </li></ul></section><section><p>Rinse the chickpeas ... </p></section></div><aside><header><h1>Related Recipes</h1></header><p>If you liked this recipe you may also enjoy:</p><ul><li><a href="#">Toor Dal Pumpkin Soup</a></li><li> ... </li><ul></aside><footer><p>This recipe is republished from ... >.</p></footer></article>
</body>

配方被标记作为article ，将含有header中，两个aside S（每一个用于图像和相关的食谱的列表）中， div为配方本身，和footer 。在食谱div ，有许多section s，每组成分各一个，说明列表也各一个。

风格

让我们从默认的八列布局开始。在样式表中向下滚动到该部分（将在重置样式和版式默认设置的下面）。我们的第一个任务是设置主要内容的宽度div和aside s和浮动它们彼此相对的：


article > div {float: left;width: 348px;margin-right: 24px;margin-bottom: 24px;padding: 24px;background: #FFF;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
} article > aside {float: right;width: 228px;
}

您会注意到我正在使用子选择器（>）。当然，这只是出于示例的目的，但是您可能需要依赖更传统的选择器，具体取决于您需要支持的浏览器，在这种情况下，您需要向标记添加一些class和id属性。

这里的数学运算很简单：主div是五列宽，在这些列之间包括四个装订线。因此，（5 x 60）+（4 x 24）=396。每边的填充为24px，则div的宽度为348px。对于aside S时，数学是（3×60）+（2×24）= 228的布局的整个宽度，然后由具有余量的对于所述内容的24个像素div 。

这些样式已经给我们提供了足够好的两列布局，尽管存在一些问题。首先，对于位于其中的列，图像太大。这很容易解决（我在某些边界上也有一些阴影）：

article > aside img {width: 218px;padding: 4px;background-color: #FFFFFF;border: 1px solid #DDDDDD;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0, 0.2);-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

我还为标题，段落和列表提供了一些默认样式，但是由于这些样式与布局无关，因此我将在此处跳过它们。您始终可以查看最终示例的源代码以查看它们。

好的，现在我们有了默认的布局，让我们继续浏览样式表。如您所见，下一个布局是超宽1280px。在您自己的自适应设计中，您可能希望从两列设计转换为三列甚至四列设计，并重新组织整个布局以更好地利用所有可用空间。但是为了说明起见，让我们扩大现有的布局：

@media only screen and (min-width: 1212px) {body {padding: 96px 72px 0;width: 1068px;position: relative;}article > div {width: 600px;margin-bottom: 24px;}article > aside {width: 396px;}article > aside img {width: 386px;}
}

请查看@media声明的语法：它说明所包含的CSS规则应仅适用于屏幕，然后仅适用于最小宽度为1212像素的CSS规则。

有了这些规则，您现在应该可以扩大浏览器窗口的宽度，并在传递1212像素时看到设计弹出到更大的尺寸。好，易于！

最后，让我们处理用于移动设备和较小屏幕的较窄的单列显示器。这些都要求我们覆盖float声明，以将所有内容保留在同一列中。对于最小的布局（320像素），我们还将减小所有字体大小以保持行长可读：

@media only screen and (max-width: 767px) and (min-width: 480px) {body {padding: 60px 42px 0;width: 396px;-webkit-text-size-adjust: 100%;}article > div, article > footer, article > aside {float: none;clear: none;}article > div {width: 348px;}article > aside img {width: 386px;}}@media only screen and (max-width: 479px) {body {padding: 48px 46px 0;width: 228px;-webkit-text-size-adjust: 100%;font-size: 13px;line-height: 18px;}article > div {width: 192px;padding: 18px;margin-bottom: 18px;}article > header > h1 {font-size: 26px;line-height: 36px;}article > div > header > h2 {font-size: 16px;line-height: 24px;}article > div, article > footer, article > aside {float: none;clear: none;}p, section, aside, ul {margin-top: 18px;}
}

就是这样！现在，您可以采用完全自适应的设计，以适应从智能手机到宽屏办公显示器的屏幕宽度。

观看演示以了解实际操作。

最后说明

响应式布局是使现有站点更容易被更多设备访问的好方法。但是，这并不是说就您的移动策略而言，您可以每天打电话。正如杰夫·克罗夫特（ Jeff Croft）和其他人所指出的那样，一个好的移动网站不仅仅限于狭窄的展示范围。就是说，根据您的资源，您的受众和网站的焦点，完全响应式布局至少是支持移动设备的第一步。

Less框架3完全不是传统意义上的框架，它是一种使用网格布局尝试响应式设计并获得此类工作所需的CSS语法和结构的好方法。一旦开始创建自己的响应式设计，就可以将其抛弃并从头开始制作CSS，也可以将其用作启动自己的响应式布局的蓝图。

From: https://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/