使用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:;

 　　　　　　}

       }

3、import condition

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

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

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

巴特西

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

最新文章

热门文章