http://www.missyuan.net/school/web_2013/web_10748.html
一.使用HTML中的viewport来实现
viewport语法如下：
HTML代码
<!--在html代码的<head>...</head>中嵌入下面代码-->
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = 0.5 ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ," />
（1）width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的
CSS 的像素）。
（2）height
和 width 相对应，指定高度。
（3）initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那
么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为
2倍。
（4）maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你
将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
（5）user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes
。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
(6)设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
HTML代码：
<meta name="viewport" content="width=device-width,user-scalable=no" />
(7)设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
HTML代码:
<meta
name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial- scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
注：1). 所有的缩放值都必须在0.01–10的范围之内。
2). minimum-scale、maximum-scale要么写值，要不留这两个
二.不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素 。这一条非常
重要。
具体说，CSS代码不能指定像素宽度：
xxx px;
只能指定百分比宽度：
xx%;
或者
auto;
三.CSS的@media规则
（1） 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
HTML代码
@media screen and (max-device- 400px) {
.column {
float: none;
auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节 （auto），sidebar块不显示（display:none）。
（2）media查询特性：
width 视口宽度
height 视口高度
device-width 设备屏幕的宽度
device-height 设备屏幕的高度
orientation 检测屏幕处于横屏还是竖屏
aspect-ratio 基于视口的宽高比例
device-aspect-ratio 基于设备屏幕的宽高比
color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
color-index 设备的颜色索引表中的颜色数
monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
scan 扫描方式，值为progressive(逐行扫描)、interlace(隔行扫描)
grid 检测输出设备是网格设备还是位图设备
（3）针对不同分辨率：
中分辨率屏幕 ：@media(-webkit-min-device-pixel-ratio:1){css代码}
高分辨率屏幕 ：@media(-webkit-min-device-pixel-ratio:1.5){css代码}
超高分辨率屏幕 ：@media(-webkit-min-device-pixel-ratio:2){css代码}
四．流动布局
各个区块的位置都是浮动的，不是固定不变的。
HTML代码
.main {
float: right;
70%;
}
.leftBar {
float: left;
25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会 在水平方向
overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
五. 图片的自适应
图片的宽度和高度要按百分比来设定，千万不可以设定成固定大小。
HTML代码
<img width="95%" src="" alt="" />
六.css3的新属性: display：-webkit-box
(1)属性：
webkit-box-orient：子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列
-webkit-box-flex ：子元素之间比例，仅作一个系数
-webkit-box-direction ：子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group ：以组为单位的流体系数
-webkit-box-ordinal-group ：以组为单位的子元素排列方向
-webkit-box-lines： 子元素是否换行，类似word-wrap和word-break的作用
-webkit-box-align ：子元素垂直方向的对其方式
-webkit-box-pack ：子元素水平方向的对其方式
（2）例子：父元素被1、2、3均分，且2和1之间间隔10px
HTML:
CSS:
怎么理解上面的代码呢，父亲有一块地，要分给兄弟几个，除去老大和老二之间的分割线所占的那块，剩下的部分均分的分数由li的兄弟个数和box-flex的总数确定，现在一共三兄弟，每兄弟的box-flex都是1，所以就总分数=1*1+1*1+1*1=3.
如果代码稍作修改:
那么现在老二的box-flex是2了，总分数就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占两份，显示效果如下：
-webkit-text-size-adjust:none
设置在屏幕横屏的时候字体不自动变大
字级单位：rem
我们之前用em、百分比的时候遇到的问题就是计算，而且当嵌套的层级太多时就会非常难以把控，而用px则被固定死了，
现在我们用rem完全不用担心这个问题，因为rem的参照对象只有根节点。我们只需设置根节点的大小，所有子节点都只需参照它来设计就可以，下面是px、em、百分比和pt的对比
我们只需设置html根元素字体大小为75%，对应的px值就是12，这样我们可以很方便的设置页面的宽高和字体大小，当然单位是rem，这样参考对象才会永远是html而不是父元素，当需要变化的时候，只需改变html的大小其他的元素都会相应变化，方便极了。
Px,em,rem的区别
PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
比如说你在#content中声明了字体大小为1.2em，那么在声明其子元素p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。避免1.2*1.2 = 1.44
rem特点
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
-webkit-box-sizing:border-box: 指定该盒子的大小包括边框的宽度
当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100%。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。