最近用 responsive web design 对目前的网站一部分页面进行了重写
总结了下对应 responsive web design 中遇到的问题和解决方法

什么是 responsive 页面

百度百科是这么定义的

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局

我的理解是不管你是什么设备，我只管你的画面大小，根据你的画面给你最合适的显示

multi-device support

现在的各种设备越来越多，你不得不对各个设备进行显示优化

比如常见的有 pc、tablet、mobile，将来估计会不断增加

尤其是手机 (mobile)，现在手机访问网站越来越成为主流，让开发人员不得不优化手机页面

具体实现的技术有很多，大概总结了一下

1. 做一个手机专用的网站 (URL 分开)

比如像这样

• PC http://xxxx.com/
• mobile http://xxxx.com/sp/

优点

• 可以完全独立进行开发、管理
• 可以设计成为完全不同的风格

缺点

• 相同的内容必须两边都要更新
• URL 不同，不利于 SEO

2. 做一个手机专用的网站 (URL 一样)

根据终端的 user agent 来判断类型
然后返回不同的 HTML 文件

优点

• 可以设计成为完全不同的风格
• 同一个 URL，对 SEO 比较有利

缺点

• 对于相同的内容，必须更新多个 HTML 文件 (Rails 里面的 view)
• 出现新的设备或者设备增加以后，需要更新设备的判定

3. responsive web design

优点

• 同一个 URL，对 SEO 比较有利
• HTML 是同一个文件，更新起来比较方便
• google 推荐的实现方式

缺点

• 因为 CSS 会包含其他终端用的内容，有可能让 CSS 变大导致读取时间变长
• 前端开发可能刚开始不太适应，会降低开发效率
• PC、mobile 的 UI 在设计的时候不能差异太大

为什么用 responsive web design

目前的项目用的是第二种办法，对 user agent 进行判断，然后返回不同的 HTML 文件

• pc 的时候 render index.html.erb
• sp 的时候 render index_sp.html.erb
• tablet 的时候 render index_tablet.html.erb

维护一段时间以后发现一些不方便的地方

• PC,mobile,tablet 的 view 文件基本差不多
• JS,CSS 也有很多重复的内容

由于各个页面的 pc、tablet、mobile 的内容是基本相同的
所以采用了 responsive web design 来实现

开发的大体流程

决定断点

决定最基本的断点
这个可以根据你的网站访问的设备的大小来进行判定，每个网站应该会有些不同
比如我是这样定义的

• 320px ～ 480px mobile
• 481px ～ 768px tablet
• 768px ～ 900px pc small
• 900px ～ pc wide(1280px 以上的话固定为 1280px)

参考网站

• The Most Used Responsive Breakpoints in 2017 Of Mine
• Responsive Design Best Practices

CSS 设计

目前采用的是 ITCSS + BEM，具体可以参见 CSS 设计之 ITCSS 这篇文章

因为网站的 mobile 访问量非常多
所以先写 mobile 用的 CSS，然后在用 media-query 覆盖 mobile 的设定来写 tablet、PC

1. 添加一个 media-query 的 mixin

@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;
  }
}

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

2. 定义断点

$breakpoint-pc-min: 900px;

$breakpoint-pc-small-max: 899px;
$breakpoint-pc-small-min: 769px;

$breakpoint-tablet-max: 768px;
$breakpoint-tablet-min: 481px;

$breakpoint-sp: 480px;

3. 像下面这样先写 mobile 的，然后在分段写 (当然不一定都要用到)

/* 320px ~ 480px */
.container {
}

/* 481px ~ 768px */
@include min-screen($breakpoint-tablet-min) {
  .container {
  }
}

/* 769px ~ 899px */
@include min-screen($breakpoint-pc-small-min) {
  .container {
  }
}

/* 900px ~  */
@include min-screen($breakpoint-pc-min) {
  .container {
  }
}

遇到的问题

需要大脑里模拟画面变大变小以后的画面

我觉的这是刚开始写的时候最困难的地方

• 设计人员一个页面准备各个断点的画面
• 先写 320px ~ 480px 的 CSS，然后 tablet、PC 分段来写对应的 CSS
• 练习，练习，再练习 我写了一个多月才基本适应这种思考方式

组件的微调

在 ITCSS 中，用 Components 来进行组件的重用
但是在 responsive web design 里面，同一个组件在每个页面大小，边距等也许会有所不同

解决方法

• 共用的控件不写 media query
• 加入了 page layout, 里面放每个页面专有的 CSS，在里面用 media query 进行具体的调整

大概是这样

@import "./components/parts/*";
@import "./components/projects/*";
@import "./pages/page1/*";
@import "./pages/page2/*";
@import "./pages/page3/*";

• components/parts 放 button，link 等通用的组件
• components/projects 放 book_card, author_card 等项目专用的组件
• pages 用来放每个页面专用的 CSS，用 media query 进行微调

相同的 HTML 对样式变化太大的地方 CSS 实现困难

比如 menu 做成这个网站这样

• http://3.7designs.co/blog/2007/12/advanced-css-menu-trick/

pc 的时候

mobile 的时候

解决方法

• 没找到太好的解决办法
• 目前在 HTML 里面写了两个 menu 的 html，在用 media-query 来控制显示和隐藏
  • pc 的时候显示 pc 用的 html，mobile 的时候显示 mobile 用的 html

responsive web design 对于差别太大的 UI 实现起来不容易
所以 UI 设计会尽可能的不要太大的差别
如果你的项目 PC 和 mobile 的 UI 差别很大的话，不建议使用 responsive design

总结

总结了 responsive web design 的优缺点和开发中的一些问题
有好的意见请回复我