响应式网页设计——学习笔记一

知识点整理：

1. CSS 的 @import 方式会增加 HTTP 请求（这会影响加载速度），所以请谨慎使用该方法。

2. 现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处（个人喜好或为便
于组织代码除外）。使用多个独立的文件会增加用于页面渲染的 HTTP请求数量，从而导致页面加载变慢。

3. Respond.js（https://github.com/scottjehl/Respond）是为 Internet Explorer 8及更低版本增加媒体查询支持的最快的 JavaScript工具，但它目前无法解析 CSS的 @import 命令。因此，建议在已有的样式表中追加媒体查询样式。

4.一个通用的重置样式，可以根据自己的需要更改。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

5. 防治页面自动调整页面大小， <meta> 标签中可以设置具体的宽度（如像素值）或者缩放比例如 2.0（设备实际尺寸的两倍）。

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

6. 禁止用户缩放页面，在实践中很少禁用。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

7. 流动布局宽度变成百分比，计算公式：目标元素宽度÷上下文元素宽度=百分比宽度 ，上下文宽度就是紧邻的外围div宽度，最外层div可以自由发挥，可以是100%，或是其他。页面各处的内边距、外边距也替换成等价的百分比值。不过这当中的上下文是最外层的div宽度，不是上一层div宽度。百分比的结果最好不要四舍五入。

8. 用em代替px作为字体单位。“目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。现代浏览器默认字体大小为16px，采用这个单位的好处是如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改 body 的文字大小，其他所有文字也会相应变大。

<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>修改后的相对单位样式如下：#content h1 {font-family: Arial, Helvetica, Verdana, sans-serif;text-transform: uppercase;font-size: 4.3125em; } /* 69 ÷ 16 */#content h1 span {display: block;line-height: 1.052631579em; /* 40 ÷ 38  上下文为本身*/color: #757474;font-size: .550724638em; /* 38 ÷ 69  上下文为69*/}

以上代码的重点在于目标元素的尺寸，和上下文元素的尺寸。

9. 为不同的屏幕尺寸提供不同的图片。

    Matt Wilcox 的“自适应图片  http://adaptive-images.com 了。实现 Adaptive Images解决方案需要 Apache 2、PHP 5.x和 GD库，也就是说需要 Web服务器端编程。首先，在其网站上下载.zip文件开始配置：解压文件，然后将其中的 adaptive-images.php 和 .htaccess 文件拷贝到网站的根目录。如果你网站的根目录下已经有一个 .htaccess 文件了，不要覆盖它。参考下载包中的 instructions.htm 文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache的文件夹。用你最喜欢的 FTP客户端软件设置该文件夹的权限为 777 。然后把如下 JavaScript代码复制到每个需要自适应图片的网页的头部：<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';path=/';/script>如果你没有使用 HTML5（在下一章会改用 HTML5），想让页面通过标准验证，则需要追加 type属性。所以 script标签应如下所示：<script type="text/javascript">document.cookie='resolution='+Math.maxscreen.width,screen.height)+'; path=/';</script>切记这段 JavaScript 代码要放在页面头部（最好作为第一个脚本），因为它需要在页面加载完成之前，而且要在发出图片请求之前运行。过去，我通常将所有图片都放在一个名如 images或 img的文件夹中，不论是用做 CSS背景的图片，还是通过标签插入的图片。但是在使用自适应图片方案时，建议将那些用于CSS的背景图片（或者那些你不想被缩放的图片）放在另一个目录。自适应图片方案默认为此创建的目录是 assets 。如果你不想缩放某张图片，把它丢进这个文件夹即可。如果你想将这类图片存在其他（或更多）文件夹中，则需要像下面这样修改 .htaccess 文件。

<IfModule mod_rewrite.c>Options +FollowSymlinksRewriteEngine On# Adaptive-Images --------------------------------------------------------RewriteCond %{REQUEST_URI} !assetsRewriteCond %{REQUEST_URI} !bkg# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the abovedirectories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images -----------------------------------------------------</IfModule>

上面的代码设定了存在 assets 或 bkg 文件夹中的图片不会被缩放。反之，如果你想显式声明只允许某个特定文件夹中的图片被缩放，那么将设置规则中的感叹号去掉即可。例如，如果我只想让网站根目录下名为 andthewinnerisnt 的文件夹中的图片被缩放，则修改后的代码如下所示：

<IfModule mod_rewrite.c>Options +FollowSymlinksRewriteEngine On# Adaptive-Images ------------------------------------------------------RewriteCond %{REQUEST_URI} andthewinnerisnt# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images --------------------------------------------------</IfModule>

10 . 媒体查询代码，一下两种方式，一种判断最大尺寸，一种判断范围

@media screen and (min-width: 1001px) and (max-width: 1080px) {#navigation ul li a { font-size: 1.4em; }}<pre name="code" class="css">@media screen and (max-width: 1080px) {#navigation ul li a { font-size: 1.4em; }}

11. CSS网格系统/框架

Columnal：http://www.columnal.com)。如果你需要一种快速搭建响应式网站结构的方法，那么 Columnal这样的 CSS网格系统值得考虑。