Justin's Words

Responsive Web Design 初探

Posted on | In |

这是今天学习 RWD 的一些记录，所有代码都放在 github 上了，不过先声明，这个页面不是我自己写的，所有代码来自 webdesignerwall，原作者对代码保留一切权利。

HTML 文件部分

viewport

首先你需要 viewport 来适应手持设备屏幕

1
<meta name="viewport" content="width=device-width; initial-scale=1.0">

html5.js

为了对付不支持 html5 新标签的浏览器（主要是 IE8 及以下的版本），你需要用到 html5.js

1
2
3
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

css3-mediaqueries.js

同样是为了对付不支持 css3 viewport 属性的浏览器，你需要用到 css3-mediaqueries.js

1
2
3
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

网页基本框架

  • 一个 <div id="pagewrap"> 用来包裹整个处理部分
  • 每个页面都用一个主 <header> 来明示页面主题，里面有 <hgroup>、<nav>等，当然怎么做是你的事，这里是一个建议
  • 主要部分是 <div id="content">，里面将会是 <article>，<article> 里面一般会有 <header>、<figure>、<p> 和 <object> 等
  • 然后可以有一个 <aside> 放 archive 和 widget 什么的，这里不同部分用 <section> 分开
  • 最后都应该有一个 <footer>，放上 copyright 或其他你想放上去的内容

CSS 文件部分

css 文件建议分为两个

一个 style.css 作为网页总体 css 的基础，用于在宽于 960px 的屏幕上显示，另一个 media-queries.css 用为 media queries

style.css 基本部分

首先 RESET 所有元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}

img, fieldset {
    border: 0;
}

/* set image max width to 100% */
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

这里有个 width: auto\9; 属于 IE hack，IE 问题多你懂的

General Styling In style.css

这个主要是用于是网页元素适应 RWD 的要求

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body {
    background: #0d1424 url(images/body-bg.jpg) no-repeat center top;
    font: .81em/150% Arial, Helvetica, sans-serif;
    color: #666;
}
a {
    color: #026acb;
    text-decoration: none;
    outline: none;
}
a:hover { text-decoration: underline; }
p {
    margin: 0 0 1.2em;
    padding: 0;
}

/* list */
ul, ol {
    margin: 1em 0 1.4em 24px;
    padding: 0;
    line-height: 140%;
}
li {
    margin: 0 0 .5em 0;
    padding: 0;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4em;
    margin: 20px 0 .4em;
    color: #000;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

/* reset webkit search input styles */
input[type=search] {
    -webkit-appearance: none;
    outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

然后就是写好你自己希望的样式了

css transition

也许你需要一些 css3 的动画来处理页面，举个例子：

1
2
3
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;

然后用什么来触发就是你的事了，本例子用的是 :focus

media queries.css

media queries 一般分为三部分：

1
2
3
@media screen and (max-width: 980px) {}
@media screen and (max-width: 650px) {}
@media screen and (max-width: 480px) {}
  • 其中 980px 以上是一般桌面屏幕的宽度，小于 980px 则一般是手持设备了，不过相比手机要大，也就是平板电脑，比如 iPad；
  • 650px 是 iPhone 横屏时的尺寸；
  • 480px 是 iPhone 竖屏时的尺寸。

让图片和视频响应式的 css 是：

1
2
3
max-width: 100%;
height: auto;
width: auto\9;  /* ie8 */

但有时候你不能让视频太小，不然看起来黑乎乎的一片，所以你可能需要为视频设置一个最小高度：

1
2
3
4
5
6
7
max-width: 100%;
/* embedded videos */
.video embed,
.video object,
.video iframe {
    min-height: 250px;
}

在 iPhone 上有个问题，就是它的浏览器有允许的最小字体，页面字体再小就不行了，好像最小是 12px，这时候我们需要在 @media screen and (max-width: 480px) {} 特别去除这个设定：

1
2
3
4
max-width: 100%;
html {
    -webkit-text-size-adjust: none;
}

在相对更小的页面中字体不能太大，这时候可以把有的元素的字体改小点：

1
2
3
4
5
6
7
max-width: 100%;
@media screen and (max-width: 480px) {
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
}

css3 渐变

css3 渐变写法在不同内核浏览器有些差异，这里提醒一下：

1
2
3
4
max-width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);