隨著設(shè)備種類的增多，網(wǎng)站設(shè)計(jì)是否能響應(yīng)式地根據(jù)頁(yè)面大小進(jìn)行適配變得越來(lái)越重要。下面是在進(jìn)行響應(yīng)式設(shè)計(jì)過(guò)程中需要注意的幾個(gè)點(diǎn)：
設(shè)置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
圖片溢出問(wèn)題
假設(shè)設(shè)備的寬度為1000px, 而圖片的大小為1200px, 那么勢(shì)必會(huì)產(chǎn)生橫向滾動(dòng)條掠拳，這是很不友好的，解決方案是：
# 為元素添加max-width=100%
img, embed, object, video {
max-width: 100%;
}
從小屏幕設(shè)備適應(yīng)到大屏幕設(shè)備
一開始就從小屏幕設(shè)備適配起纸肉，有以下好處:
- 將關(guān)鍵信息放在用戶容易看見的地方溺欧，從小屏幕做起
- 可以知道主要風(fēng)格和布局是否能兼容任何設(shè)備
- 小屏幕設(shè)備對(duì)性能要求很高，因此可以從一開始就關(guān)注性能問(wèn)題
確保點(diǎn)擊的區(qū)域夠大
用戶在手機(jī)等設(shè)備上操作時(shí)柏肪，如果按鈕大小太小姐刁，且按鈕之間的間距也很小的話，容易產(chǎn)生誤操作烦味，因此要確保點(diǎn)擊的區(qū)域至少在40px左右聂使，如加上：
padding: 1.5em;
合理使用min-width和max-width
min-width和max-width在媒體查詢中的作用巨大
根據(jù)網(wǎng)站內(nèi)容合理選擇斷點(diǎn)
即各個(gè)設(shè)備尺寸使用不同的布局方式
使用彈性布局flex
在響應(yīng)式設(shè)計(jì)中壁拉，常用的flex屬性為flex-wrap和order
常見的響應(yīng)式布局
- column drop(掉落列模型)
- 小屏幕設(shè)備布局核心代碼：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
- 中屏幕設(shè)備布局核心代碼
@media screen and (min-width: 600px) {
.dark {
width: 25%;
}
. blue {
width: 75%;
}
}
- 大屏幕設(shè)備布局核心代碼
@media screen and (min-width: 601px) {
.dark, .green {
width: 20%;
}
. blue {
width: 60%;
}
}
-
mostly fluid (大體流動(dòng)模型)
mostly fluid 跟 column drop 很類似，只是在column drop的基礎(chǔ)上柏靶，在最大尺寸時(shí)兩邊增加margin
mostly fluid模型.png
- 大屏幕時(shí)的核心代碼如下:
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
-
layout shifter(布局切換器)
layout shifter跟column drop也很類似弃理，不同于column drop, layout shifter增加了order來(lái)調(diào)整div的順序
layout shifter模型.png
- 大屏幕時(shí)的核心代碼如下:
@media sceen and (min-width: 600px) {
.dark {
width: 25%;
order: 1;
}
.container 2 {
width: 50%;
}
.red {
width: 25%;
order: -1;
}
}
-
off canvas (畫布之外模型)
off canvas模型較為常見，先在小屏幕中隱藏導(dǎo)航欄等使用頻率不高的組件屎蜓，然后通過(guò)點(diǎn)擊某個(gè)圖標(biāo)才顯示導(dǎo)航欄
off canvas模型.png
- 小屏幕中的核心實(shí)現(xiàn)代碼如下：
.nav {
width: 300px;
height: 100%;
position: absolute;
transform: translate(-300px, 0);
transition: transform 0.3s ease;
}
.nav.open {
transform: translate(0, 0);
}
- 屏幕變大時(shí)顯示nav的操作：
@media screen and (min-width: 600px) {
.nav {
position: relative;
transform: translate(0, 0);
}
body {
display: flex;
flex-flow: row nowrap;
}
.main {
width: auto;
flex-grow: 1;
}
}
- 切換的js代碼
menu.addEventListener('click', function(e) {
drawer.classList.toggle('open');
e.stopPropagation();
});
響應(yīng)式表格
雖然表格布局已經(jīng)幾乎被我們摒棄掉了痘昌，但是還是有一些需求需要用到表格來(lái)展示數(shù)據(jù)，比如籃球比賽的分?jǐn)?shù)等炬转，那么響應(yīng)式表格要怎么實(shí)現(xiàn)呢辆苔？
- 隱藏某些不重要的列，也就是設(shè)置為
display: none(so easy, right?) -
將縱向排列轉(zhuǎn)為橫向排列
舉個(gè)例子：
縱向排列表格.png
實(shí)現(xiàn)的核心代碼如下：
- html結(jié)構(gòu)：
<table>
<thead>
<tr>
<th>Team</th>
<th>1st</th>
<th>2nd</th>
<th>3rd</th>
<th>4th</th>
<th>5th</th>
<th>6th</th>
<th>7th</th>
<th>8th</th>
<th>9th</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Team">Toronto</td>
<td data-th="1st">0</td>
<td data-th="2nd">0</td>
<td data-th="3rd">0</td>
<td data-th="4th">4</td>
<td data-th="5th">0</td>
<td data-th="6th">1</td>
<td data-th="7th">0</td>
<td data-th="8th">0</td>
<td data-th="9th">0</td>
<td data-th="Final">5</td>
</tr>
<tr>
<td data-th="Team">San Francisco</td>
<td data-th="1st">0</td>
<td data-th="2nd">0</td>
<td data-th="3rd">0</td>
<td data-th="4th">4</td>
<td data-th="5th">0</td>
<td data-th="6th">0</td>
<td data-th="7th">0</td>
<td data-th="8th">0</td>
<td data-th="9th">0</td>
<td data-th="Final">4</td>
</tr>
</tbody>
- css代碼：
table {
border: 1px solid #ddd;
}
tr:nth-child(odd) {
background-color: #f9f9f9;
}
@media screen and (max-width: 500px) {
# 在一行顯示
table, thead, tbody, th, td, tr {
display: block;
}
# 隱藏縱向表格的table header
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
# 給橫向表格的table header騰空間
td {
position: relative;
padding-left: 50%;
}
# 通過(guò)content添加橫向表格的內(nèi)容
td:before {
position: absolute;
left: 6px;
content: attr(data-th);
font-weight: bold;
}
td:first-of-type {
font-weight: bold;
}
}
- 滾動(dòng)表格
將表格放在一個(gè)div中扼劈，并設(shè)置div為
width: 100%;
overflow-x: auto;
字體
每行顯示45～90個(gè)字體字符驻啤，常見為65個(gè)字符
增加次要斷點(diǎn)
通過(guò)次要斷點(diǎn)，對(duì)字體大小荐吵，圖標(biāo)大小等進(jìn)行優(yōu)化街佑，達(dá)到更好的顯示效果
