使用media query 来实现响应式设计

你的网页在手机上显示效果可以在电脑上一样好看。完成这个任务的奥秘被称为响应式设计，媒体查询（media query）是实现网页响应的关键。

在电脑上一个例子：

<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

css样式：

.row{
width:100%;
}
.span{
width:300px;
float:left;
margin-left:30px;
}

这个在电脑上显示，是正常的，在一定设备上布局并不是我们期望的。

Media query

在css外部设置应用相应样式的条件。有一些特征可以用来决定是否应用哪些样式。下面这些是其中重要的部分：

. width

. height

. device width

. device height

. resolution

. orientation

. aspect ratio

通过设备宽度来决定使用什么样式。下面相应的规则。

@media(max-width:500px)

如果规定屏幕宽度小于500px 的时候使用css样式。这个样式条件为true,才会引用。

有三种不同方式来应用这个条件规则：

1、<link> tag

如下 ：<lin rel ="stylesheel" type="text/css" media="screen and(max-width:500px)" href="test.css">

2、media condition

一块css代码可以用花括号包围起来，css定义只有当media query 满足下面条件的时候才有效：

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

.row{

width:100%;

　  　}

　 .span{

　　　　　　　width:auto;
　　　　　　　float:left;
　　　　　　　 margin:0;
　　　　　　}
}

3、import condition

一个引用只有在media query 条件满足的时候才回将外部css导入。在外部文件里定义的css样式只有条件被满足的时候才会有效。

@import url("test.css") screen and(max-width:500px);

我们可以使用media query 来改变页面的布局，但是使用它们做类似条件css定义也是可以的。我们经常通过改变字体大小、图片质量、空白等其他元素

来更好的适应不同类型的设备。