webapp之路--之query media
query media是css3中的模块，对于移动端的开发是非常重要的，是响应式web设计的中不可或缺的一部分。简单点说就是根据不同移动设备的屏幕参数来制定不同的css方案以实现web的响应式开发。目前Media Query在浏览器上的兼容度要高很多，Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流浏览器都能很好的支持Media Query。CSS3 Media Query模块是目前在特定移动设备上开发Web应用样式所必需的技术。
先列举下常见的引入方式：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持 如
样式文件中调用另一个样式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在<head></head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
这种引入方式和@import是一样的，也有两种方式：
样式文件中使用：
@media screen{
选择器{
属性：属性值；
}
}
在<head>>/head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@media screen{
选择器{
属性：属性值；
}
}
</style>
</head>
多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
二、好了让我们来做个例子吧：
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。呢么我们可以这样写：
.header{background:url("1.png") no-repeat;}
//像素比为1.5时
@media only screen and (-moz-min-device-pixel-ratio:1.5),noly screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-radio:1.5),only screen and (min-device-pixel-radio:1.5){
.header{background:url("1.png") no-repeat;background-position:66.7%;}
}
//......
ok！我们再来看一个阿里的试题：
No.9
实现如下图所示的布局
要求：
sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局
默认如下
宽度小于600px时如下
下面是html结构：
- <div class='header'>
- <h1>header</h1>
- </div>
- <div>sidebar"</h1>
- </div>
- <div>
- <h1>content</h1>
- </div>
请写出其css代码：
（提示，可以使用media query来检测浏览器窗口宽度）
ok，并不难!
这里也涉及到了css3的盒模型，涉及到了box及自适应不就，ok，直接粘代码。
*{margin:0;padding:0;}
body{width:100%;height:200px;display:box;display:-moz-box;display:-webkit-box;}
.header{
width:100%;
background:red;
margin-bottom:10px;
}
@media only screen and (max-width:600px){
body{
box-orient:vertical;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
.header{
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
margin-bottom:10px;
}
.sidebar{
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
background:green;
margin-bottom:10px;
}
.content{
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
background:blue;
margin-bottom:10px;
}
}
