HTML/CSS 写 Responsive 页面的总结

heroyct · 2018年09月30日 · 最后由 heroyct 回复于 2018年10月04日 · 6257 次阅读

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

什么是 responsive 页面

百度百科是这么定义的

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

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

multi-device support

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

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

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

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

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

比如像这样

优点

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

缺点

  • 相同的内容必须两边都要更新
  • 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)

参考网站

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 做成这个网站这样

pc 的时候

image

mobile 的时候

image

解决方法

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

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

总结

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

设计很重要。有些预设了屏幕大小的设计,就很难做 responsive

@luikore 第一次做 responsive 的项目
确实和 UI 设计关系很大,有些设计不适合或者很难做 responsive
换个角度说要做 responsive,你需要 responsive 的 UI 设计,一开始就和做 UI 的达成共识很重要

luikore 回复

responsive 有哪些经典案例呢?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号