编程
您现在的位置:首页 >> 编程

一个简单实用的三栏响应式布局的网页

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="height=device-height, width=device-width, user-scalable=no, initial-scale=1.0" />

<title>响应式布局</title>

<style type="text/css">

*{margin: 0px;padidng: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(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(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(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(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(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(800.png) #ccc;}

}

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

.box1.box3{background:#3399cc;}

.box2{background: url(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(20.png) #ccc;background-size:50%;}

}

</style>

</head>

<body>

<div class="box1">

    <p>第一栏</p>

</div>

<div class="box2">

</div>

<div class="box3">

    <p>第三栏</p>

</div>

</body>

</html>

 

例子中,背景图片请测试时自己准备。

这是一个自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上也是三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。

@media screen and (min-width: 320px) and (max-width : 479px) 这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。 这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式。

对高像素比的终端,比如iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,我们用了另外一个条件查询语句 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时所渲染的样式。一般来说显示一张1px的背景图片,我们要准备一张2px的,然后再background-size:50%这样。1.5像素比同例。

 相关文章