使用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,才会引用。

 

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

一、<link> tag

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

二、media condition

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

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

            .row{

                     width:100%;

          　  　}

       　 .span{

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

 

 

三、import condition 

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

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

 

咱们可使用media query 来改变页面的布局，可是使用它们作相似条件css定义也是能够的。咱们常常经过改变字体大小、图片质量、空白等其余元素

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