响应式布局入门

[27/6土,15]

css2的时期有一个不是很常用的media type，他拥有比如aural（声音）braille（触摸）print（打印）handheld（移动设备）等等十种媒体类型,附加媒体类型。

现在CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3。这是响应布局实例，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, user-scalable=no, initial-scale=1.0" />
<title>demo</title>
<style type="text/css">
*{
    margin: 0px;
    padding:0px;
    border:0px;
}
a{
    color:#666;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
body{
    background:#fff;
    font-size:12px;
    color:#333;
    padding:10px 200px;
}
.box1,.box2,.box3{
    box-shadow:#ccc 1px 1px 4px;
    border-radius:4px;
}
.box1{
    width:180px;
    margin-left:-190px;
    background:#99ccff;
    float:left;
}
.box2{
    background: url(d/min1024.png) #ffffcc;
    width:100%;
    height:122px;
    float:left;
}
.box3{
    float:right;
    *position:relative;
    *right:-10px;
    width:180px;
    margin-right:-190px;
    background:#99ccff;
}
.box1 p,.box2 p,.box3 p{
    padding:10px;
}

@media screen and (max-width : 319px){
  body{
    padding:10px 0;
  }
  .box1,.box3{
    display:none;
  }
  .box2{
    float:none;
    margin:5px 5px;
    width:auto;
    background: url(d/320.png) #fff;
  }
}

@media screen and (min-width: 320px) and (max-width : 479px){
  body{
    padding:10px 0;
  }
  .box1,.box2,.box3{
    float:none;
    margin:0 5px 5px 5px;
    width:auto;
  }
  .box1.box3{
    background:#cccc33;
  }
  .box2{
    background: url(d/480.png) #ccc;
  }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
  body{
    padding:0;
  }
  .box1,.box2,.box3{
    float:none;
    margin:0 5px 5px 5px;
    width:auto;
  }
  .box1.box3{
    background:#99ccff;
  }
  .box2{
    background: url(d/640.png) #fff;
  }
}
@media screen and (min-width: 640px) and (max-width: 767px) { 
  body{
    padding:0;
  }
  .box1,.box2,.box3{
    float:none;
    margin:0 5px 5px 5px;
    width:auto;
  }
  .box1.box3{
    background:#ccff66;
  }
  .box2{
    background: url(d/768.png) #fff;
  }
}

@media screen and (min-width: 768px) and (max-width: 799px)  { 
  body{
    padding:0;
  }
  .box1,.box2,.box3{
    float:none;
    margin:0 5px 5px 5px;
    width:auto;
  }
  .box1.box3{
    background:#99cc33;
  }
  .box2{
    background: url(d/800.png) #ccc;
  }
  }
  @media screen and (min-width: 800px) and (max-width: 1024px) { 
  .box1.box3{
    background:#3399cc;
  }
  .box2{
    background: url(d/1024.png) #ccc;
  }
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  body{
  }
  .box2{
    background: url(d/20.png) #ccc;
    background-size:50%;
  }
}
</style>
</head>

<body>
  <div class="box1">
    <p>
      <a href="http://www.caihong.cc">http://www.caihong.cc。</a>
    </p>
  </div>
  <div class="box2">
  </div>
  <div class="box3">
    <p>
      <a href="http://www.caihong.cc">http://www.caihong.cc。</a>
    </p>
  </div>
</body>
</html>

一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是三列，在大屏手机上是三行，在屏幕小于320的手机上只显示主要内容，隐藏掉了次要元素。（这个demo也可以用拖动浏览器大小的方式测试。）

这就是一个最简单的响应式布局的页面。从这个例子里认识下media query属性。

@media screen and (min-width: 320px) and (max-width : 479px)

就从这个条件语句开始介绍，media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的都能看懂，这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。

这个语句，就是响应式布局的基础应用了。在判断终端分辨率大小之后，赋予不同的样式进去，就像这个例子里

@media screen and (max-width : 320px){
  body{...}
}

@media screen and (min-width: 800px) and (max-width: 1024px){
  body{...}
}

至于要判断多少种分辨率，完全取决于你产品的需求，常见的分辨率有手机，平板（注意这些终端是存在横屏、竖屏区别的,这个下一篇里提），桌面显示器。自己为自己所面对的终端定制样式。

一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外，就是高像素比的终端，比如 iphone4以上的retina屏，一个iphone5的小小的屏幕（iphone的屏幕是真小啊），他的分辨率竟然达到了1136*640，如何让放大了两倍的屏幕显示依然清晰？

在面对这种分辨率精细的终端，我们有另外一个条件查询语句 device-pixel-ratio。

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端的像素比是2的话，所渲染的样式。iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5，例子里只有像素比为2的查询，1.5的或者其他比例方法一样，前面用的是几种浏览器的私有属性，最后一种是通用属性，

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等于

1@media only screen and (min-device-pixel-ratio: 2)

为了一些版本的兼容性，不得已写的长了。

body{
  font-size:24px;
}
.box2{
  background: url(d/20.png) #ccc;
  background-size:50%;
}

在像素比为2的终端里这样写的目的，就是让他显示的更容易识别，一般来说显示一张1px的背景图片，我们要准备一张2px的，然后再background-size:50%这样。1.5像素比同例。

比如上面的demo，如果你用iphone4以上的苹果手机来看，中间的背景图片应该是显示“2.0像素比”。

这里也暴露了响应式一个很大的缺点：需要多做若干背景图（作为内容显示的图片暂时无视，弹性图片与弹性字体，下次单独写一篇介绍博文介绍）。

对于media query的兼容性，我想不是很重要，因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要，可以下载一个兼容的JS文件

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

以条件注释的方式加在文件里。

posted on 2015-06-27 14:56 yahari 阅读(79) 评论(0) 收藏举报

刷新页面返回顶部