响应式网页入门教程

今天来写一个最最简单的响应式网页,主要是针对那些还未接触过响应式布局或不知如何入手的人(比如俺)借助的工具是最新版的Dreamweaver CC 2014,版本旧一点的也没关系,只要你的默认DTD是

<!doctype html>

就说明版本还不算老。

首先先新建一个html网页,默认代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

现在我们需要插入Media Quary(媒体查询),是一个meta标签,在DW中点击 插入–>Head–>视口 就能插入这段代码。至于代码中的各个属性都是什么意思,如果想深入学习可以自行Google或去W3CSCHOOL在线教程查询。

之后我们建立几个标签,建立CSS,做一个header、article(content)、aside(sidebar)、footer的两栏简单布局,代码如下:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header>此处为新 header 标签的内容</header>
    <article>此处为新article 标签的内容</article>
    <aside>此处为新 aside 标签的内容</aside>
    <footer>此处为新 footer 标签的内容</footer>
</body>
</html>

CSS

header {
	width: 700px;
	height: 100px;
	background: #DBE71A;
}
article {
	width: 500px;
	height: 800px;
	background: #21D5A0;
	float: left;
}
aside {
	width: 200px;
	height: 600px;
	background: #DBD1F0;
	float: left;
}
footer {
	width: 700px;
	height: 100px;
	background: #DBE71A;
	clear: both;
}

大致样貌如图所示

20140817171255

接下来就要做屏幕自适应了。我们刚才插入了viewport代码,浏览器已经获得了屏幕宽度,现在我们就要据此进行条件判定,比如屏幕小于768px执行什么CSS代码,小于480px执行什么CSS代码。

20140817172042

在DW的操作如图所示,在CSS设计器的 媒体 点+号,增加相应的媒体筛选条件,目前我们要用的是最简单的max-width筛选,具体代码如下:

@media screen and (max-width:768px){

header {
	width: 90%;
}
article {
	width: 60%;
}
aside {
	width: 30%;
}
footer {
	width: 90%;
}

}

@media screen and (max-width: 480px) {

header {
	width: auto;
}
article {
	width: auto;
	float: none;
}
aside {
	width: auto;
	float: none;
}
footer {
	width: auto;
}

好了,现在按下F12到浏览器中测试一下具体效果吧。

拉动浏览器窗口以便达到不同尺寸,当窗口宽度小于768px时,浏览器开始执行@media screen and (max-width:768px)中的代码,各个标签开始按照百分比布局;当窗口小于480时,article和aside清除了浮动,也就变成了我们时常看见的“侧边栏浮动到下面”。

虽然这个教程比较菜,但对于菜鸟来说正合适,先多快好省地学会方法,至于其中的原因可以留到以后慢慢学。揭开所谓的面纱,响应式布局是不是变得非常简单了?掌握了这些,我们就可以继续学习更加复杂的媒体询问,以及max-width等属性的用法了。

最后,贴出完整的代码(几乎什么都没写啊;好奇葩的布局;好啦好啦我都说了这只是菜鸟教程嘛……)

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header>此处为新 header 标签的内容</header>
    <article>此处为新article 标签的内容</article>
    <aside>此处为新 aside 标签的内容</aside>
    <footer>此处为新 footer 标签的内容</footer>
</body>
</html>

CSS

header {
	width: 700px;
	height: 100px;
	background: #DBE71A;
}
article {
	width: 500px;
	height: 800px;
	background: #21D5A0;
	float: left;
}
aside {
	width: 200px;
	height: 600px;
	background: #DBD1F0;
	float: left;
}
footer {
	width: 700px;
	height: 100px;
	background: #DBE71A;
	clear: both;
}

@media screen and (max-width:768px){

header {
	width: 90%;
}
article {
	width: 60%;
}
aside {
	width: 30%;
}
footer {
	width: 90%;
}

}

@media screen and (max-width: 480px) {

header {
	width: auto;
}
article {
	width: auto;
	float: none;
}
aside {
	width: auto;
	float: none;
}
footer {
	width: auto;
}

}

响应式网页入门教程》上有5条评论

评论已关闭。