移动端开发系列（三） —— 响应式页面

我们平时开发中会遇到页面在PC端和在移动端显示效果不一样，也就是常说的响应式页面，可以根据屏幕大小而改变外观。实现主要有以下几种方案：

• 方案1，直接使用现成的bootstrap框架，自动的实现响应式页面，缺点无法满足自己的个性化需求和细节。
• 方案2， 为PC端和移动端单独写页面和样式，可以实现个性化需求，但是工作量增多，维护难度大。
• 方案3 ，使用模板系统，为PC和移动端单独写一个前端的页面模板，维护难度和代码量多少于方案2。
• 方案4，自己使用@midia实现一个轻量级和个性化的CSS框架，优势灵活性强，可复用性高，缺点自己写框架代码量大，费时长，可能与原有项目重复，造成浪费。

下面是一个响应式页面的实现，如图。

响应式页面

1、一般来说，只要不写死宽度就是一个完美的响应式页面。不写死宽度的响应式
可以看出这种写法下页面的内容都是随着页面大小的变化而发生变化，当页面很宽时显然不够美观，这时候就要求能够在页面宽度达到一定宽度时不变化。

下面列表宽不美观

2、当页面到达一定宽度，要求下面的几个卡片宽度不变，这时可以给对应的容器设置一个最大宽度：

.cards{
  max-width: 960px;
  margin: 0 auto;
}

给容器最大宽

可以看到当页面宽度超过了960px后，容器由于设置了这个最大宽度为960px，所以不会改变。设置最大宽度

3、当页面变得足够小的时候，希望容器里的内容变成两列，这时候就用到@media语法，即就是媒介查询，也就是通过判断你通过什么东西浏览这个网页来控制页面显示。

.cards li{
  width: 33.333%;
  float: left;
  box-sizing: border-box; 
  padding: 10px; 
}
/* 当页面宽度小于640px时，里面的样式就生效 */
@media (max-width: 640px) {
  .cards li{
    width: 50%;
  }
}

媒介查询

媒介查询判断宽度变化

4、还有一种就是有时候简单的改变样式不能达到效果，这时就要将两套页面写出来，然后通过媒体查询切换给定样式来显示不同内容。
html代码：

/* 写了两套内容 */
<div class="banner">
    <h1 class="one-line">标题标题标题标题</h1>
    <h1 class="two-lines">标题标题<br>标题标题</h1>
</div>

.banner .two-lines{
  display:none;
}

css代码：

/* 通过css控制两套内容的切换显示 */
@media (max-width: 320px){
  .banner .one-line{
    display: none;
  }
  .banner .two-lines{
    display: block;
  }
}

结合媒体查询改变样式来切换内容

以上就是一个简单的响应式页面实现过程。