自适应布局

媒体查询css3

在css2中对于不同的媒体类型你可以规定不同的样式，例如screen，print等。在css3中你可以利用媒体查询来时样式更高效的工作，你可以使用媒体表达式来判断当前的媒体，执行不同的样式，例如：你可以对大的显示器使用一种样式，对小的显示器（例如手机）使用例外一种样式，这样就达到页面适应不同分辨率的屏幕。

Max Width (下面的css会在屏幕的可视区最大分辨率为600px的时候执行)

@media screen and (max-width: 600px) {

    //your stylesheet

}

 

 

如果你想对不同分辨率的屏幕加载不同的css，你可以这样做：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css">

也可以通过css分发器：例如

<link rel="stylesheet" href="dispatcher.css">

在dispatch.css中通过 @import url("tinyScreen.css") screen and (max-device-width: 400px)

Min Width(下面的css会在屏幕的可视区最小分辨率为900px的时候执行)

@media screen and (min-width: 900px) {

    //your stylesheet

}

Multiple Media Queries(下面的css会在屏幕的可视区分辨率在600px-900px之间的时候执行)

@media screen and (min-width: 600px) and (max-width: 900px) {

    //your stylesheet

}

Device Width(下面的css会在设备的实际分辨率最大为480px,iphone 的时候执行)

@media screen and (max-device-width: 480px) {

    //your stylesheet

}

下面的样式是针对iPhone4的

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css">

下面的样式是针对ipad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

 

对于ie8- 不支持media query 但是可以使用一下三种方式解决

 

1. css tricks-using jQuery to detect browser size

2. The Man in Blue - using Javascript

3. jqyery media queries plugin（建议使用这种方式，例如css3-mediaqueries.js）

 

图片的灵活显示

为了让图片显示更加灵活，只需设置 max-width:100% 和 height:auto。然而 max-width:100% 和 height:auto在IE7中运行，但不能在IE8中运行，所以需要为IE8添加width:auto\9。

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

 此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);

imgSizer.collate(imgs);

});

 

 

 

初始化MeTa标签 Initial Scale Meta Tag (iPhone)

默认情况下，iPhone的Safari浏览器会自动缩小页面来显示，下面来使用Meta标签让网页字节按CSS样式显示。

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。