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" rel="external nofollow" 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%;}