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

Posted 2020-06-29 SeaJson

你的网页在手机上显示效果可以在电脑上一样好看。完成这个任务的奥秘被称为响应式设计，媒体查询（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定义也是可以的。我们经常通过改变字体大小、图片质量、空白等其他元素

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