前端开发中移动优先的响应式设计

创作时间:

作者:

@小白创作中心

前端开发中移动优先的响应式设计

引用

CSDN

https://blog.csdn.net/qq_24956515/article/details/145745409

一. 推崇移动优先

在前端开发中，响应式设计可以有两种实现方式：一种是传统的响应式设计，另一种是移动优先的响应式设计（Mobile First RWD）。像 Bootstrap 这样的前端 CSS 框架，就采用了 Mobile First 的策略。那么，什么是“移动优先的响应式设计”？它的优势在哪里呢？

二. 移动优先的响应式设计

Luke Wroblewski 在一篇名为《Mobile First》的博客中首次提出了“移动优先”这个概念。他认为应该先设计移动端的网络应用或网站的用户体验，然后再考虑桌面版。

传统的响应式设计流程通常是：先设计和开发桌面版，然后再设计移动端。而“移动优先”的响应式设计流程则相反，如图所示：

这里的“移动优先的响应式设计”主要针对网站设计，指的是先开发手机版网页，CSS 文件中的默认样式就是手机版页面的，然后通过 media-query，逐步添加样式，以适应平板和桌面版网页。

简而言之，传统的响应式设计流程是先桌面电脑，再平板，后手机；而移动优先的响应式设计流程则正好相反，先手机，后平板，最后是桌面电脑。

三. 为何要移动优先

首先从市场份额角度来看，随着移动互联网的爆发，如果还认为大家主要用桌面机访问网页，而只是“偶尔”使用手机来访问，手机端页面“可有可无”，那么这种观点肯定已经过时了。虽然现在手机端的很多流量是通过 APP 实现的，但不可否认移动端网页体验也变得越来越重要。

从技术实现的角度来看，手机屏幕尺寸小，桌面电脑屏幕大。先设计手机页面意味着先设计一个简单版本的页面，然后随着平板版和桌面版的引入，页面会慢慢变得复杂起来，这是一个递增过程，也是一个前期精力只放到最核心功能模块上的过程。不仅仅是思路上由简入繁，清爽怡人，同时当用手机打开网页的时候，默认打开的只是相对比较简单的手机版样式，而复杂一些的桌面版的相应样式都在 media-query 中包裹着，所以不会加载，那么这样页面访问速度是最佳的。

例如：

.content {
  /* 一些简单的样式，专门为手机而生 */
}
@media screen and (min-width: 400px) {
  .content {
    /* 为大屏设备设计的比较复杂的样式 */
  }
}

同样，如果手机版页面是默认的，一些鼠标滑过效果，甚至是阴影，动画效果，图片等各种手机上用不到或者是不必要的内容也是可以用同样的上面的方法来避免在手机访问的时候加载的。

.content {
  backgound: #bada55;
  /* 手机上也许实现一个简单的颜色就很好看了 */
}
@media screen and (min-width: 800px) {
  .content {
    background-image: url("bg.png");
  }
  /* 电脑访问的时候再来加载大图，和鼠标滑过等效果 */
  .content:hover {
    ...;
  }
}

具体的，可以查看这个例子：button demo 。（如果你正在用普通桌面电脑来打开这个 demo 那么可以把浏览器先拉窄，这样可以模仿出手机屏幕的效果，可以看到页面加载的按钮样式是非常简单的，下面来不断拉宽浏览器，到达一个临界点好，桌面版的按钮样式就会显示出来）。

但是反之，如果我们先有了一个桌面版的复杂网页，然后想要逐步做减法来最终达成手机版网页，那么这个过程就会很困难，容易造成重复设计劳动，如果处理不好，还可能导致臃肿的代码。