共计 3150 个字符，预计需要花费 8 分钟才能阅读完成。
1. 设计思路
在本响应式网页设计中，通过 媒体查问 @media 规定，使网页自适应不同浏览设施的屏幕宽度。网页中 <header> 位于网页顶端，<footer> 位于网页底端，二者不管在哪一种状况下，其宽度总是为浏览窗口宽度的 100%，而 <nav>、<article> 和 <aside> 依据不同浏览窗口的大小自适应其宽度，并以不同形式布局：
- 当浏览窗口宽度 大于 768px时，
<nav>位于网页左侧、<article>位于网页两头，<aside>位于网页右侧，适应 桌面端 浏览窗口； - 当浏览窗口宽度 大于 480px 小于 768px时，
<nav>和<article>位于网页上方并由左至右排列、<aside>位于网页下方，适应 ipad 端 浏览窗口； - 当浏览窗口宽度 小于 480px时，
<nav>、<article>和<aside>由上至下顺次排列，适应 手机端 浏览窗口。
2. 网页截图
桌面端：
ipad 端：
手机端：
3. 代码实现
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<!-- 通过 JS，动静地为 footer 增加类 fixed-bottom -->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){function footerPosition(){$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,// 网页注释全文高度
winHeight = window.innerHeight;// 可视窗口高度，不包含浏览器顶部工具栏
if(!(contentHeight > winHeight)){
// 当网页注释高度小于可视窗口高度时，为 footer 增加类 fixed-bottom
$("footer").addClass("fixed-bottom");
} else {$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
</head>
<body>
<header>
<h1> 我的网页 </h1>
<p>——这是一个同时适应桌面端 /ipad/ 手机的响应式网页 </p>
</header>
<div class="row">
<nav class="col-25 col-s-25 menu">
<ul>
<li> 个人简介 </li>
<li> 我的珍藏 </li>
<li> 联系方式 </li>
<li> 历史记录 </li>
<li> 对于咱们 </li>
<li> 更多功能 </li>
</ul>
</nav>
<article class="col-50 col-s-75 article">
<h1> 为什么咱们须要开源的零碎芯片 </h1>
<p>
不再应用的芯片区域是一件小事，因为构建芯片可不像搭乐高积木那般简略，它更像是雕刻家刻在大理石快上的雕塑，因而增加电路的难度远远高于敞开电路。减少一条电路仅制作新的掩膜就大概须要破费 100 万美元，同时还会导致我的项目提早 70 天（大概 10 万人时的额定工作）。而在正确打算的状况下，敞开一条电路非常简单，只须要批改代码，或者针对某个掩模层进行轻微改变，只须要破费大概 1 万美元以及几天的提早（假如晶圆尚处于中期阶段，很容易进行这样的改变）。</p>
</article>
<div class="col-25 col-s-100">
<aside>
<h2> 数据结构与算法 </h2>
<h2> 计算机网络 </h2>
<h2> 操作系统 </h2>
<h2> 计算机组成原理 </h2>
<h2> 计算机系统构造 </h2>
<h2> 数据库原理 </h2>
</aside>
</div>
</div>
<footer>
<p>footer@2020</p>
</footer>
</body>
</html>test.css
* {
/* 初始化 勾销页面的内外边距 */
padding: 0;
margin: 0;
/* 盒子模型 */
box-sizing: border-box;
}
/* 在整个 row 上面减少空行内容 */
.row::after {
content: "";
clear: left;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
/* 默认是手机端 0-480px*/
/*ipad 端 481px-768px*/
@media only screen and (min-width: 481px) {.col-s-25 {width: 25%;}
.col-s-75 {width: 75%;}
.col-s-100 {width: 100%;}
}
/* 桌面端 769px+*/
@media only screen and (min-width: 769px) {.col-25 {width: 25%;}
.col-50 {width: 50%;}
}
html {font-family: Arial, Helvetica, sans-serif;}
header {
background-color: darkblue;
color: white;
padding: 15px;
text-align: center;
}
header p {margin-top: 15px;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
background-color: deepskyblue;
color: white;
padding: 10px;
margin-bottom: 15px;
box-shadow: gray 1px 2px 2px;
transition-property: all;
transition-duration: .5s;
}
.menu li:hover {background-color: darkblue;}
.article {
background-color: wheat;
padding: 15px;
margin: 15px 0;
}
.article p {padding: 15px;}
aside {
background-color: deepskyblue;
color: white;
padding: 15px;
text-align: center;
font-size: 15px;
box-shadow: gray 3px 3px 3px;
}
aside h2 {padding: 10px;}
footer {
background-color: lightgray;
color: darkblue;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100%;
}
img {
padding: 15px;
width: 100%;
height: auto;
}
/* 动静地为 footer 增加类 fixed-bottom*/
.fixed-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
正文完
