注册

CSS3之Media Queries响应式布局设计

嗨豆壳技术文章 时间:2014-07-20 21:23:28 [ray]

响应式布局是一个比较火的话题,它可以让浏览器根据当前窗口尺寸自动加载一种样式并使用。

我们知道,不同的设备中使用的分辨率可能是不一样的。如果只针对某种分辨率制作网页,在其它设备中呈现该网页时就可能产生很多问题;而如果针对每种分辨率制作不同的网页,则要制作的网页就会太多。

为了解决这个问题,CSS3 中单独增加了Media 属性,使用这个模块,只需要针对不同的分辨率来编写不同的样式,然后让浏览器根据不同的窗口尺寸来选择使用不同的样式渲染网页即可。

用途:主要还是用在移动终端设备上,现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用media技术。

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>响应式布局的示例</title>
<style type="text/css">
body{ margin: 20px 0;}
#container{ width: 960px;margin: auto;}
#wrapper{ width: 740px;float: left;}
p{ line-height: 600px;text-align: center;font-weight: bold;font-size: 2em;margin: 0 0 20px;}
#main{ width: 520px;float: right;background: yellow;}
#sub01{width: 200px;float: left;background: orange;}
#sub02{ width: 200px;float: right;background: green;}
/* 窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
	/* 3栏显示*/
    #container{ width: 1000px;}
    #wrapper{ width: 780px;float: left;}
    #main{ width: 560px;float: right;}
    #sub01{ width: 200px;float: left; }
    #sub02{ width: 200px;float: right;}
}
/* 窗口宽度在640px以上、999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
    /* 2栏显示 */
    #container{ width: 640px;}
    #wrapper{ width: 640px;float: none;}
    p{ line-height: 400px;}
    #main{ width: 420px;float: right;}
    #sub01{ width: 200px;float: left;}
    #sub02{ width: 100%;float: none;clear: both;line-height: 150px;}
}
/* 窗口宽度在639px以下 */
@media screen and (max-width: 639px) {
    /* 1栏显示  */
    #container{ width: 100%;}
    #wrapper{ width: 100%;float: none;}
    body{ margin: 20px;}
    p{ line-height: 300px;}
    #main{ width: 100%;float: none;}
    #sub01{ width: 100%;float: none;line-height: 100px;}
    #sub02{width: 100%;float: none;line-height: 100px;}
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<p id="main">MAIN</p>
<p id="sub01">SUB 01</p>
</div>
<p id="sub02">SUB 02</p>
</div>
</body>
</html>
例子实现效果如图示

css3响应式布局设计css3响应式布局设计css3响应式布局设计

CSS 3的Media属性也支持对外部样式表的引用,使用方法类似如下所示:

@import url(public.css) screen and (min-width:1000px);
或者
<link href="public.css" rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" />

标签

本文地址:https://www.hi-docs.com/article/49.html

上一篇:javascript中replace()替换函数的用法

下一篇:linux date命令实现日期时间和Unix时间戳转换