商院官网：响应式布局
来自CloudWiki
（重定向自自适应网页之二）
目录
什么是响应式布局
- 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
- 这就是响应式布局，设计一种页面，然后在多个终端上都能取得良好的访问效果。
响应式布局的实现
第一步，在HTML的头部加入meta标签
- 在HTML的头部，也就是head标签中增加meta标签，告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放，代码如下：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
简单分析一下这一行代码的含义：width=device-width表示网页的宽度等于设备屏幕的宽度，initial-scale=1.0表示设置页面初始的缩放比例为1，user-scalable=no表示禁止用户进行缩放，maximum-scale=1.0 和 minimum-scale=1.0 表示设置最大的和最小的页面缩放比例。因为各大浏览器对meta标签的解析程度不一样，所以我们要尽可能的去兼容所有浏览器。
第2步，盒子的宽度尽量使用百分比布局
- 在页面布局中，相对宽度和绝对宽度相结合来进行布局，将更有利于网页的可维护性。
- 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
#layer1{width:100%; height:auto; text-align:center;}
#layer1-1{width:45%; height:80px; background:white;;text-align:center;float:left;}
#layer1-2{width:55%; height:auto;background:blue;;color:#074C97;text-align:center;float:left;}
#layer1-2-1{width:100%;height:40px;background:#8DD1F9;padding-top:20px;padding-left:0px;}
#navigation {
width:100%; height:70px;
background:#8DD1F9;color:#074C97;
font-weight:bold;text-align:center; /* 这个属性使盒子中的链接居中 */
text-align:center;
margin:0;
padding:0;
}
#navigation a{
width:16%;
float:left;
height:60px;
line-height:40px;
color:#074C97;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation a:hover{
background-color:#074C97; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
#layer1-3{clear:both;}
#layer2{width:100%; height:auto;color:black;}
#layer2-1{width:100%;height:410px;background:#074C97;background:url(image/01.png);
background-size:100% 410px;background-repeat:no-repeat;
}
#layer2-1 img{height:400px;}
.layer2-2{width:95%;height:auto;margin:7px auto;background:white;border-style:solid;border-radius:1.5em; border-color:#E0DFE1;}
.layer2-2 h2{text-indent:2em; background:#074C97;
border-top-left-radius:1em;border-top-right-radius:1em;color:white;font-size:1.2em;letter-spacing:0.2em;line-height:180%;text-align:left;}
.layer2-2-1{width:40%;height:auto;margin:7px;float:left;}
.layer2-2-1 img{width:100%;}
.layer2-2-2{width:52.5%;height:auto;;float:left;}
.layer2-2-2 a {font-size:1em;color:black;text-decoration:none;}
.layer2-2-2 ul{ padding:0; margin:0;}
.layer2-2-2 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;}
.layer2-2-2 table{ width:90%;}
.layer2-2-2 table .col1{ width:85%; }
.layer2-2-2 table .col2{ width:15%;text-align:right;color:gray;}
.layer2-2-2 a:hover{
background:#8DD1F9;
}
.layer2-2-3{clear:both;}
#layer2-3{width:100%;height:auto;padding-left:2%;background:white;}
#layer2-3 a {font-size:1em;color:black;text-decoration:none;}
.layer2-3-1{width:30%;height:auto;border-style:solid;
border-radius:1.5em; margin:0.5%;border-color:#E0DFE1;background:#f6f6f6;float:left;}
.layer2-3-1 h3{text-indent:2em;;border-top-left-radius:1em;
border-top-right-radius:1em;}
.layer2-3-1 ul{ padding:0; margin:0;}
.layer2-3-1 ul li{ padding:0 0 0 0px;list-style:url(images/arrow.gif) inside;line-height:250%;}
.layer2-3-1 table{ width:90%;}
.layer2-3-1 table .col1{ width:85%; }
.layer2-3-1 table .col2{ width:15%;text-align:right;color:gray;}
.layer2-3-1 a:hover{
background:#8DD1F9;
}
.layer2-3-4{clear:both;}
#layer2-3 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;letter-spacing:0.2em;line-height:180%;text-align:left;}
#layer3{width:100%; height:auto; line-height:200%; background:#EBEBEB;color:black;text-align:center;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-1">
<img src="http://www.sict.edu.cn/Templets/mode3/images/logo.png" alt="校园图片" />
</div>
<div id="layer1-2">
<div id="layer1-2-1">
<form action="/example/html/form_action.asp" method="get">
<p>请输入关键词：<input type="text" name="fname" />
<input type="image" src="image/03.png" alt="Submit" style="vertical-align:bottom" /></p>
</form>
</div>
<div id="navigation">
<a href="#">学校概况</a>
<a href="#">机构设置</a>
<a href="#">教育教学</a>
<a href="#">创新创业</a>
<a href="#">科技服务</a>
</div>
</div>
<div id="layer1-3"></div>
</div>
<div id="layer2">
<div id="layer2-1">
<img src="http://www.sict.edu.cn/Templets/mode3/ad/01.jpg" alt="轮播图" />
</div>
<div class="layer2-2">
<h2>学校要闻</h2>
<div class="layer2-2-1">
<img src="http://www.sict.edu.cn/files/file/201909192203248803.jpg" alt="校园图片"/>
</div>
<div class="layer2-2-2">
<ul>
<table>
<tr>
<td class="col1"><li><a href="#">"庆祝十九大 礼赞中国梦”第七届美文诵读大赛举行</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">我校举办大学生生命教育专题报告</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">马广水书记参加会计学院党总支“深入学习贯彻落实</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">钱乃余院长到工商管理学院指导宣贯十九大精神</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">我校承办山东省兽医卫生检验员培训系列项目</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">智能制造与服务学院学生荣获全国机械行业职业院校技能大赛一等奖</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">马广水书记参加省委书记刘家义召开的工作座谈会</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">《尚德论坛》第四十七讲举行</a></li></td>
<td class="col2">3月5日</td>
</tr>
</table>
</ul>
</div>
<div class="layer2-2-3"></div>
</div>
<div id="layer2-3">
<div class="layer2-3-1">
<h3>学校要闻</h3>
<br/>
<p><img src="http://www.sict.edu.cn/files/file/2019121721285758703.jpg" alt="校园图片" width="100%"/> </p>
<br/>
<ul>
<table>
<tr>
<td class="col1"><li><a href="#">马克思主义学院召开陶行知教育...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">我校承办2017年山东省农产品质量...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">2017山东养老服务业高峰论坛在我...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">校报荣获全国高校校报协会2016年...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">浙江纺织服装职业技术学院、河北...</a></li></td>
<td class="col2">3月5日</td>
</tr>
</table>
</ul>
</div>
<div class="layer2-3-1"><h3>通知公告</h3>
<br/>
<p><img src="http://www.sict.edu.cn/files/file/2019121620371028242.jpg" alt="校园图片" width="100%"/> </p>
<br/>
<ul>
<table>
<tr>
<td class="col1"><li><a href="#">关于组织开展国家职业指导师...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">关于公布2017年公开招聘工作人员...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">关于公布2017年公开招聘工作人员...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">2017年公开招聘工作人员笔试公告...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">关于2017年公开招聘工作人员现场...</a></li></td>
<td class="col2">3月5日</td>
</tr>
</table>
</ul>
</div>
<div class="layer2-3-1"><h3>媒体报道</h3>
<br/>
<p><img src="http://www.sict.edu.cn/files/file/2019121620444826224.jpg" alt="校园图片" width="100%"/> </p>
<br/>
<ul>
<table>
<tr>
<td class="col1"><li><a href="#">新浪山东：山东商职院承办2017年...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">大众网：山东商职院承办山东省职...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">新浪山东：2017山东养老服务业高...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">新浪山东：全国高校“形势与政策”...</a></li></td>
<td class="col2">3月5日</td>
</tr>
<tr><td class="col1"><li><a href="#">大众网：全国高校“形势与政策”课...</a></li></td>
<td class="col2">3月5日</td>
</tr>
</table>
</ul>
</div>
<div class="layer2-3-4"></div>
</div>
</div>
<div id="layer3">
<p>学校地址：济南市旅游路4516号 邮编：250103</p>
<p>电话：0531-86335888 招生电话：0531-86335555</p>
<p>鲁ICP备05002370 </p>
</div>
</body>
</html>
第三步，在CSS代码中加入媒体查询
目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局，以后介绍bootstrap的时候来介绍栅格布局，这里主要来说一下如何利用媒体查询实现响应式布局。
媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式，所以将媒体查询相关的代码放在css文件的最下方即可。
/*当页面的宽度小于991px之间的时候，手机屏*/
@media screen and (max-width: 991px){
#layer1-1,#layer1-2{
width: 100%;
height:auto;
}
#layer1-1 img{width:100%;}
#navigation { width:100%;
}
#navigation a{
width:16%;height:40px;
line-height:40px;
}
#layer2-1 img{width:100%;}
.layer2-2-1,.layer2-2-2,.layer2-3-1{
width: 94%;
}
}
第四步，页面使用相对字体
在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的绝对单位em和rem
.one{
font-size: 1.5em;
}
.two{
font-size: 0.5em;
}
.three{
font-size: 2em;
}
返回 网页设计与开发
