1. 在网页头部 <head></head> 之间加上 viewport 标签（复制粘贴）

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

2. 学会运用 CSS Media Queries，即根据不同的屏幕分辨率（浏览器宽度），选择应用不同的 CSS 规则，用法介绍：

max-width: 浏览器宽度 < 800px，则下方的 CSS 描述就会立即被套用：

@media screen and (max-width: 800px) {
  .example { background:#ccc; }
}

min-width: 浏览器宽度 > 800px，则下方的 CSS 描述就会立即被套用： 

@media screen and (min-width: 800px) {
  .example { background:#ccc; }
}

max-width & min-width 一起使用：当 400px < 浏览器宽度 < 800px， 则下方的 CSS 描述就会立即被套用： 

@media only screen and (max-width: 800px) and (min-width: 400px) {
  .example { background:#ccc; }
}

3. 不使用绝对宽度

想要网页根据浏览器宽度自动调整页面布局，则不能使用具有绝对宽度的元素 ( e.g. width: 200px; ) ， 需使用百分比宽度 ( e.g. width: 30%; ) 。也最好不使用绝对宽度 ( e.g. margin-left: 5px; ) 的布局 

.example { width: 300px; }  × wrong
.example { width: 30%; }  √ right

4. 流动布局 ( fluid grid )

流动布局的含义是各个位置都是浮动的，不是固定不变的。

.fright { float: right; width: 70%; }
.fleft { float: left; width: 30%; }

float 的好处是：如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现。

5. 图片的自动缩放，等比缩放

img { width: 100%; max-width: 100%; height:auto; }

要使图片按等比缩放，一般不需要规定图片高度，且最好不用 background-image 因为这样图片不会按照等比缩放。

6. 字体最好不要用绝对大小 px ，而使用相对大小 em 

body { font: normal 100% Arial, sans-serif; }

网页默认大小为 1em，即 16px。上面的代码意思是：字体大小是页面默认大小的100%，即 16px

h1 { font-size: 1.5em; }

h1 的大小是默认大小的 1.5 倍，即 24px（24/16=1.5）