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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <!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">
<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").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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row::after {
content: "";
clear: left;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 481px) {
.col-s-25 {width: 25%;}
.col-s-75 {width: 75%;}
.col-s-100 {width: 100%;}
}
@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;
}
.fixed-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
|