页面自适应

说明：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定。

一、页面自适应

1、允许网页宽度自动调整

代码：

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

说明：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

注 ：对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 代码：

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

2、不使用绝对宽度

说明：

　　1、CSS代码不能指定像素宽度：width:xxx px;

　　 2、只能指定百分比宽度：width: xx%;或者width:auto;

3、相对大小的字体：字体也不能使用绝对大小（px），而只能使用相对大小（em）。

4、流动布局（fluid grid）

说明：“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

5、选择加载CSS

说明:“自适应网页设计”的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。 例：

<!--如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。-->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
<!--如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 

6、CSS的@media规则

说明：同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

例 ：

/*
　　如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），
　　sidebar块不显示（display:none）。
*/
@media screen and (max-device-width: 400px) {
    .column {
        float: none; 
        width:auto;
    }
    #sidebar {
        display:none;
    }
} 

7、图片的自适应（fluid image）

说明：除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码：img { max-width: 100%;}

除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码：img { max-width: 100%;}

8、使用

图片【img】

img{
    width: 100%;
    max-width: 50rem/em;
}

 

//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，

//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

//总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

二、响应式布局：

1、基本范围

屏幕	范围
超小屏幕	(移动设备) w<768px
小屏设备	768px-992px 768 <= w <992
中等屏幕	992px-1200px 992 =< w <1200
宽屏设备	1200px以上 w>=1200

2、CSS 语法

(1)、

@media mediatype and|not|only (media feature) {
    id、class、属性...{}
} 

(2)、

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 

3、媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

4、媒体功能

值	描述
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。