1. Design ideas
In the programming, <header>or <footer>the element irrespective In any case, the total width of the browser window width is 100%,
when the browser window is smaller than the width of the mobile phone terminal 480px, 768px is less than greater than 480px opad end, is greater than 768px desktop.
2. Webpage screenshot
Desktop:
ipad:
Mobile terminal:
3. Code implementation
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>
<img src="https://img-blog.csdnimg.cn/2020111709205454.png">
</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%;
}