1 回應式
什么是回應式布局
回應式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端（手機、平板、pc電腦、手表） ——而不是為每個終端做一個特定的版本，這個概念是為解決移動互聯網瀏覽而誕生的，
為什么要有回應式布局？
- 在移動互聯日益成熟的時候，在PC端開發的網頁已經無法滿足移動設備的要求，
- 通常的做法是針對移動端單獨做一套特定的版本，
- 如果終端越來越多，那么需要開發的版本就會越來越多（大屏設備的普及）
- 回應式布局 ：一個網站能夠兼容多個終端（節約開發成本）
優點：
面對不同解析度設備靈活性強
能夠快捷解決多設備顯示適應問題
缺點：
兼容各種設備作業量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況
回應式開發現狀：
- 如果已經存在PC的網站了，那么一般不會使用回應式開發，而是針對移動端再開發一套系統（比如京東、淘寶）
- 在新建站點 上采用回應式開發的越來越多，
- 在國內，回應式開發還不是特別的流行，但回應式開發是大勢所趨，會越來越流行，
回應式開發與移動web開發的比較
| 開發方式 | 移動web開發+pc開發 | 回應式開發 |
|---|---|---|
| 參考場景 | 一般已經有了PC端網站，只需要端獨開發移動端網站即可 | 針對一些新建網站，并且要求適配移動端 |
| 開發 | 針對性強，開發效率高 | 兼容各種終端，效率低 |
| 適配 | 只能適配移動端或者PC端，pad上體驗比較差 | 可以適配各種終端 |
| 效率 | 代碼簡潔，加載快 | 代碼相對復雜，加載慢 |
2 媒體查詢
媒體查詢（Media Query）是CSS提出來的一個新的屬性，通過媒體查詢可以查詢到screen的寬度，從而指定某個寬度區間的網頁布局，
設備分類
| 分類 | 寬度范圍 |
|---|---|
| 大屏設備 | >1200px |
| 中屏設備 | 992px~1200px |
| 小屏設備 | 768px~992px |
| 超小屏設備 | < 768px |
媒體查詢的使用
需求：
<!--
需求：
大屏設備(>1200px) 版心：1170px 背景色：紅色
中屏設備(992-1200) 版心：970px 背景色：藍色
小屏設備(768-992) 版心：750px 背景色：黃色
超小屏設備(<768px) 版心：100% 背景色：綠色
-->
回應式開發的原理：使用媒體查詢實作不同終端的布局和樣式的切換，
媒體查詢語法：
/*查詢螢屏*/
@media screen and 條件 {
}
/*條件的寫法*/
/*min-width:只要螢屏寬度超過這個值的設備樣式就能生效*/
/*max-width:只要螢屏寬度小于這個值的設備樣式就能生效*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
background-color: red;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
background-color: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
background-color: yellow;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
background-color: green;
}
}
弊端：現在只有一個div，要做一套回應式布局，就需要如此多的代碼，非常的麻煩，因此我們會更多的借助一些回應式的框架，比如bootstrap，
3 原生回應式的實作
第一步：通過媒體查詢實作回應式的版心
第二步：再調整版心內的細節樣式
【原生回應式實作demo】
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生回應式</title>
<link rel="stylesheet" href="https://www.cnblogs.com/helf/archive/2021/01/02/index.css">
</head>
<body>
<!-- 頭部 導航 -->
<div >
<div >
<ul >
<li>導航</li>
<li>導航</li>
<li>導航</li>
<li>導航</li>
<li>導航</li>
<li>導航</li>
</ul>
<ul >
<li >導航</li>
<li >導航</li>
<li>導航</li>
</ul>
<span >三</span>
</div>
</div>
<!-- 原生回應式 實作柵格布局-媒體查詢 + 浮動+ 百分百 -->
<div >
<div >
<div ></div>
</div>
<div >
<div ></div>
</div>
<div >
<div ></div>
</div>
<div >
<div ></div>
</div>
<div >
<div ></div>
</div>
<div >
<div ></div>
</div>
</div>
<script>
document.querySelector('.btn').onclick= function () {
document.querySelector('.left').classList.toggle('hide-xs');
};
</script>
</body>
</html>
less
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
// 版心
.container {
width: 1200px;
margin:0 auto;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.clearfix{
overflow: hidden;
}
.header {
position: relative;
height: 70px;
padding: 10px;
background-color: #ccc;
ul {
li {
float: left;
height: 50px;
width: 80px;
background-color:green;
color: #fff;
text-align: center;
line-height: 50px;
margin: 0 10px;
}
}
.btn {
position: absolute;
right: 10px;
top: 10px;
border-radius: 5px;
width: 80px;
height: 50px;
background-color: yellow;
color: red;
text-align: center;
line-height: 50px;
font-size: 40px;
display: none;
}
}
.product {
.column{
float: left;
width: 33.33%;
height: 150px;
// border: 1px solid #000;
padding: 10px;
.in {
background-color: #f99;
height:100%;
}
}
}
// 關鍵是 有一套回應式的版心
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
}
.hide-sm {
display: none;
}
.product {
.column{
width: 50%;
}
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.hide-xs {
display: none;
}
// 設定導航樣式
.header {
ul {
margin-top: 60px;
width:100%;
li {
width: 100%;
margin: 0;
margin-bottom: 5px;
}
}
.btn {
display: block;
}
}
.product {
.column{
width: 100%;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/243803.html
標籤：其他
下一篇：JS面試題總結