随着设备种类的增多，网站设计是否能响应式地根据页面大小进行适配变得越来越重要。下面是在进行响应式设计过程中需要注意的几个点：
设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
图片溢出问题
假设设备的宽度为1000px, 而图片的大小为1200px, 那么势必会产生横向滚动条，这是很不友好的，解决方案是：
# 为元素添加max-width=100%
img, embed, object, video {
max-width: 100%;
}
从小屏幕设备适应到大屏幕设备
一开始就从小屏幕设备适配起，有以下好处:
- 将关键信息放在用户容易看见的地方，从小屏幕做起
- 可以知道主要风格和布局是否能兼容任何设备
- 小屏幕设备对性能要求很高，因此可以从一开始就关注性能问题
确保点击的区域够大
用户在手机等设备上操作时，如果按钮大小太小，且按钮之间的间距也很小的话，容易产生误操作，因此要确保点击的区域至少在40px左右，如加上：
padding: 1.5em;
合理使用min-width和max-width
min-width和max-width在媒体查询中的作用巨大
根据网站内容合理选择断点
即各个设备尺寸使用不同的布局方式
使用弹性布局flex
在响应式设计中，常用的flex属性为flex-wrap和order
常见的响应式布局
- column drop(掉落列模型)
column drop模型.png
- 小屏幕设备布局核心代码：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
- 中屏幕设备布局核心代码
@media screen and (min-width: 600px) {
.dark {
width: 25%;
}
. blue {
width: 75%;
}
}
- 大屏幕设备布局核心代码
@media screen and (min-width: 601px) {
.dark, .green {
width: 20%;
}
. blue {
width: 60%;
}
}
-
mostly fluid (大体流动模型)
mostly fluid 跟 column drop 很类似，只是在column drop的基础上，在最大尺寸时两边增加margin
mostly fluid模型.png
- 大屏幕时的核心代码如下:
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
-
layout shifter(布局切换器)
layout shifter跟column drop也很类似，不同于column drop, layout shifter增加了order来调整div的顺序
layout shifter模型.png
- 大屏幕时的核心代码如下:
@media sceen and (min-width: 600px) {
.dark {
width: 25%;
order: 1;
}
.container 2 {
width: 50%;
}
.red {
width: 25%;
order: -1;
}
}
-
off canvas (画布之外模型)
off canvas模型较为常见，先在小屏幕中隐藏导航栏等使用频率不高的组件，然后通过点击某个图标才显示导航栏
off canvas模型.png
- 小屏幕中的核心实现代码如下：
.nav {
width: 300px;
height: 100%;
position: absolute;
transform: translate(-300px, 0);
transition: transform 0.3s ease;
}
.nav.open {
transform: translate(0, 0);
}
- 屏幕变大时显示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();
});
响应式表格
虽然表格布局已经几乎被我们摒弃掉了，但是还是有一些需求需要用到表格来展示数据，比如篮球比赛的分数等，那么响应式表格要怎么实现呢？
- 隐藏某些不重要的列，也就是设置为
display: none(so easy, right?) -
将纵向排列转为横向排列
举个例子：
纵向排列表格.png
横向排列表格.png
实现的核心代码如下：
- html结构：
<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%;
}
# 通过content添加横向表格的内容
td:before {
position: absolute;
left: 6px;
content: attr(data-th);
font-weight: bold;
}
td:first-of-type {
font-weight: bold;
}
}
- 滚动表格
将表格放在一个div中，并设置div为
width: 100%;
overflow-x: auto;
字体
每行显示45～90个字体字符，常见为65个字符
增加次要断点
通过次要断点，对字体大小，图标大小等进行优化，达到更好的显示效果
