HTML/CSS 写 Responsive 页面的总结

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

最近用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的优缺点和开发中的一些问题
有好的意见请回复我

共收到 4 条回复

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

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

luikore 回复

responsive有哪些经典案例呢?

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