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>
<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%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224808.html
標籤：其他