《实用技巧》——让你的网站变成响应式的3个简单步骤

<a href="http://blog.51cto.com/lihongbo/1158086#">?</a>

1

2

3

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code> <code>content</code><code>=</code><code>"IE=edge,chrome=1"</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"HandheldFriendly"</code> <code>content</code><code>=</code><code>"true"</code><code>&gt;</code>

　　现在是时候添加一些媒体查询了。根据 W3C 网站，媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询，外观呈现可以针对特定范围内的输出设备，而不需要改变内容本身。换句话说，媒体查询让您的网站在各种各种显示器上看起来都很好，从小的智能手机到大的电脑屏幕等等。

　　媒体查询取决于你的网站布局，所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是，下面的代码对于大多数网站都是一个很好的起点。在这个例子中，#primary 是主要内容区域，#secondary 是侧栏。

　　从代码中你可以看到，我定义了两种规格：首先有一个最大宽度为1060px，为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。 第二个规格是用于平板电脑和更小的屏幕尺寸。

　　由于智能手机的屏幕尺寸小，我决定给 #primary 设置100%的宽度，#secondary 也设置100%的宽度，他将在 #primary 下面。 正如我已经说过的，你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

4

5

6

7

8

9

10

11

<code>/* Tablet Landscape */</code>

<code>@media </code><code>screen</code> <code>and (</code><code>max-width</code><code>: </code><code>1060px</code><code>) {</code>

<code>    </code><code>#primary { </code><code>width</code><code>:</code><code>67%</code><code>; }</code>

<code>    </code><code>#secondary { </code><code>width</code><code>:</code><code>30%</code><code>; </code><code>margin-left</code><code>:</code><code>3%</code><code>;} </code>

<code>}</code>

<code>/* Tabled Portrait */</code>

<code>@media </code><code>screen</code> <code>and (</code><code>max-width</code><code>: </code><code>768px</code><code>) {</code>

<code>    </code><code>#primary { </code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#secondary { </code><code>width</code><code>:</code><code>100%</code><code>; </code><code>margin</code><code>:</code><code>0</code><code>; </code><code>border</code><code>:</code><code>none</code><code>; }</code>

<code>img { </code><code>max-width</code><code>: </code><code>100%</code><code>; }</code>

　　虽然上述技术是有效的，有时你可能需要有更多的图像控制权，例如根据客户端的显示大小，显示不同的图像。

<code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"image.jpg"</code> <code>data-src-600px</code><code>=</code><code>"image-600px.jpg"</code> <code>data-src-800px</code><code>=</code><code>"image-800px.jpg"</code> <code>alt</code><code>=</code><code>""</code><code>&gt;</code>

　　

<code>@media (min-device-</code><code>width</code><code>:</code><code>600px</code><code>) {</code>

<code>    </code><code>img[data-src</code><code>-600px</code><code>] {</code>

<code>        </code><code>content</code><code>: </code><code>attr</code><code>(data-src</code><code>-600px</code><code>, </code><code>url</code><code>);</code>

<code>    </code><code>}</code>

<code>@media (min-device-</code><code>width</code><code>:</code><code>800px</code><code>) {</code>

<code>    </code><code>img[data-src</code><code>-800px</code><code>] {</code>

<code>        </code><code>content</code><code>: </code><code>attr</code><code>(data-src</code><code>-800px</code><code>, </code><code>url</code><code>);</code>

　　HTML：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"video-container"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>iframe</code> <code>src</code><code>=</code><code>"http://player.vimeo.com/video/6284199?title=0&amp;byline=0&amp;portrait=0"</code> <code>width</code><code>=</code><code>"800"</code> <code>height</code><code>=</code><code>"450"</code> <code>frameborder</code><code>=</code><code>"0"</code><code>&gt;&lt;/</code><code>iframe</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

　　CSS：

12

13

14

15

16

17

<code>.video-container {</code>

<code>    </code><code>position</code><code>: </code><code>relative</code><code>;</code>

<code>    </code><code>padding-bottom</code><code>: </code><code>56.25%</code><code>;</code>

<code>    </code><code>padding-top</code><code>: </code><code>30px</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>overflow</code><code>: </code><code>hidden</code><code>;</code>

<code>.video-container iframe, </code>

<code>.video-container object, </code>

<code>.video-container </code><code>embed</code> <code>{</code>

<code>    </code><code>position</code><code>: </code><code>absolute</code><code>;</code>

<code>    </code><code>top</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>left</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>100%</code><code>;</code>

　　在你的网站上应用了这些代码后，嵌入的视频也是响应式（Responsive）的了。

　　本教程的最后一步绝对非常重要，但往往被网站开发人员忽视——字体。到现在为止，大多数开发人员（包括我自己）使用像素来定义字体的大小。虽然像素在普通网站使用是OK的，但是对于响应式网站来说应该有响应式的字体。事实上，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。

　　rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：

<code>html { </code><code>font-size</code><code>:</code><code>100%</code><code>; }</code>

　　完成后，您可以定义响应式的字体大小，如下所示：

<code>@media (</code><code>min-width</code><code>: </code><code>640px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1</code><code>rem;} }</code>

<code>@media (</code><code>min-width</code><code>:</code><code>960px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1.2</code><code>rem;} }</code>

<code>@media (</code><code>min-width</code><code>:</code><code>1100px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1.5</code><code>rem;} }</code>

　　请注意，旧浏览器不支持 rem 单元，所以不要忘了实现一个替代。

　　这就是今天的所有内容了，希望你会喜欢这个教程！记得推荐和分享啊！

本文转自山边小溪 51CTO博客，原文链接：http://blog.51cto.com/lihongbo/1158086，如需转载请自行联系原作者