响应式设计个人的一些总结

一、为什么需要响应式设计（responsible web design）

1. 响应式发展背景

1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以继续发展。
2、网速对于用户的web使用体验有着巨大的影响。
3、对于标准的支持。浏览器对于标准的支持也很有限。
4、输入的方式。触屏设备，各种手势操作。
5、使用的环境。设备在物理上和架构上的特性，并不是我们在针对设备进行设计时需要考虑的唯一因素。了解使用环境是从相应设备的Web到响应人的Web的关键。
响应式设计的提出是由 Ethan Marcotte提出的概念，

2. 响应式设计的定义：

根据Ethan Marcotte的定义：

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

简单来说就是适配各种终端的网页设计。这里容易混淆的是自适应设计（adaptive web design），国内有些人把响应式设计也翻译为自适应设计，二者有着一些差别。

3. 响应式与自适应有什么区别

a. 自适应布局的定义

there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.

根据不同的屏幕宽度加载不同的结构。如下图所示，上面的是响应式布局，下面的是自适应布局（自适应可以是流式布局，也可以是固定布局，而响应式布局只能是流式布局）

注：图片来源于GEOFF GRAHAM

b. 响应式与自适应的区别

响应式设计要求更多的代码，它能够很好地适应所有的屏幕尺寸。
自适应设计只是针对于某几个特定的尺寸，一旦有新的屏幕尺寸出现，需要增加一些新的代码。
更加详细的解释可以看一下《What is the difference between responsive vs. adaptive web design?》

c. 结论

The goal is ensuring content is optimized for our audiences no matter what device they're on.

--Garrett Goodman

现在都是把这两种布局混合起来使用，刚开始我们是按照几个主要的屏幕分辨率做出设计稿，在重构过程中是按照响应式设计的特点，确保其能够在各种屏幕分辨率中都能够正常显示。
折衷的方法，确保在主要的分辨率屏幕上的效果与设计稿完全一致，但是在其他比较次要的分辨率下，很难保持一致，特别是一些采用百分比的元素，所以这时候的对齐只能寄希望于左、右、居中对齐。

二、响应式设计的优点和缺点

1.优点

• 适应所有设备，更容易管理。

• 一个URL：让你的用户在移动设备上更容易找到，而且不需要任何的重定向，这在较慢的网速下特别的有用。

• 容易做搜索引擎优化：不需要为移动设备创建特定的内容，可以让移动设备使用桌面网站的搜索引擎优化的好处。

• 易于营销：网站在移动设备上显示，对于营销部门来说不需要增加额外的工作量。

• 成本低：简单的数学运算，一个网站比两个网站要便宜吧。

2. 缺点

• 一个网站：让一个网站适配所有网站，对于你来说很容易，但不一定适合你的用户。你需要在同一个页面上展示不同的侧重点，以便使用该平台的最大优势，最大限度的提高你的转化率。

• 技术：响应式设计他是一种较新的技术，在一些老的设备和浏览器中加载页面速度过慢，甚至是完全不支持。

• 用户体验：移动端和PC机上的用户体验是完全不同的。所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的UX。如果你试图使用相同的界面来满足移动和桌面的两个平台的用户使用，到最后可能谁都无法满足。

三、响应式与seo

1. 如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，google会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。

2. 由于存在不同的网站，所以有一个版本的问题，网站版本错误可能会导致游客到之前的版本。

3. 搜索排名可以从移动端和桌面端双端得到很强的反向链接配置文件(搜索有关)，有利于在搜索结果中得到较先的的搜索排名。

四、响应式设计的观点

1.优雅降级(Steven champeon)

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
缺点：旧浏览器的用户体验会有偏差

2.渐进增强(NickFinckProgressive Enhance)

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

3.两种设计方式

现在有两种设计观点，移动优先和桌面优先。
从桌面开始向下设计、 从移动端开始向上设计
两种观点主要由于面向的主流对象的不同，优雅降级主要是面向pc端为主流。现在工作室采用的就是优雅降级。
移动优先是从移动端开始，然后再逐渐向桌面端适应。

4.设计要点

• 触摸设备上的触摸区域是不是足够大

• 设计方案在什么样尺寸的屏幕上显示折叠菜单按钮

• 人们与动态元素的交互有多复杂

• 增加一个断点是否能够提升设计

• 是否可以针对某一给定设备增强使用体验

• 哪些微小的调整对于支持更大范围的设备会有所帮助

五、响应式的设计稿

1.响应式断点的设置

a、断点设置的目的

关于响应式断点的设置，一开始我们要明确我们的目的：

1. 考虑所有设备的分辨率，保证任何分辨率都能够有良好的体验

2. 考虑主流屏幕分辨率的大小，确保这几种分辨率下与设计稿有着良好的重合性，其它分辨率下没有出现明显的错位和排版错位就可以了。

第2个目的其实是第1个目的的子集，第1个目的对于应对未来分辨率的变化具有很强的适应性，但同时伴随着技术要求的提高和工作量的增大。

b、主流分辨率

根据百度流量研究院的统计近期6个月分辨率使用情况，

bootstrap4.0断点设置如下

1380px、992px、768px、544px

我所在团队所设置的断点

2k、1920px、1200px、960px、768px、450px

c、设计稿

对于响应式设计稿，由于设置了很多断点，所以我们需要做出多少份设计稿？我们不可能把所有分辨率的设计稿都绘制出来。以我做过的响应式网站项目，设计稿可分为:

>1200px  以1200px为主体的1920px稿
>960px   以960px为主体的1200px稿
480px~768px 768px稿(两边不贴边，留5px左右)
手机   <720px(画布大小为720x1280,不贴边)

欢迎大家一起讨论。

六. 响应式的头文件要求

浏览器会涉及到两种像素：设备像素和css像素
设备像素是物理概念，而CSS像素是WEB编程的概念

iPhone等设备上一个css像素实际上对应两个设备像素，这也是二倍图的由来。

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">

user-scalable=no 是禁止缩放的意思。
其余属性都是为了保持设计稿原来的大小，防止由于手机自身浏览器渲染不同的原因使网页在不同手机浏览器中的效果不同。

    <!-- 从桌面 icon 启动 iOS Safari 是否进入全屏状态（App模式） yes | no-->
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <!-- iOS Safari 全屏状态下的状态栏样式  default | balck | black-translucent-->
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
    <!-- iOS 设备上禁止将数字识别为可点击的 tel link -->
    <meta content="telephone=no" name="format-detection"/>

对于ios设备进行一些初始化操作。

七. 媒体查询

@media的查询类型: 10种类别，常用为screen
更多Media类型参见：Media types

1. 两种响应式应用的方式

a. css文件中使用媒体查询

@media screen and (min-width: 1200px) and (max-width: 1920px) {
   .class {
     background: #fff;
   }
}

b. 直接在link中判断设备的尺寸，然后引用不同的css文件

< link rel ="stylesheet" type ="text/css" href = "index.css"  media = "screen and (min-width: 1200px)" >

2. 关键字的使用

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备，这个应该经常看到。

我们注意一下以下三种写法的不同之处：

@media (max-width:1200px)

窗口小于1200px的时候应用后面的样式

@media screen and (max-width:1200px)

识别为screen设备，且窗口小于1200px的时候应用后面的样式

@media only screen and (max-width:1200px)

对于only关键字,w3c的解释为

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

意思是对于only，老的用户代理会隐藏掉后面的样式内容，而（可识别only）用户代理在执行媒体查询的时候，会忽略only.
stackoverflow有更多详细内容，可以参见下方的参考资料链接。

八. 响应式布局

1、固定布局

最为常见的实现方式。优点是对于页面拥有跟多的控制权。大屏幕的则会留很多空白，对于小的屏幕就会出现滚动条

2、流体布局

采用百分比，是页面具有可变的特性，可避免出现的大片留白。但是有些文本的行款在大屏幕上看起来太宽，小屏幕上有太窄。

3、弹性布局

与流体布局类似，但是采用em作为单位，em为当前字体的大小。除了跟流体布局类似的优点外，用户增大或减少字体，使用弹性布局的元素的宽度也会等比例变化。也会出现水平滚动栏。

4、混合布局

几种布局的集合。

5. 响应式字体

a、像素

无需考虑级联(父元素的字体大小对于子元素没有影响)，但是对于维护来说，当你想要改变所有字体的大小时，你得修改所有的（sass改变了这种现状，因为sass拥有变量）

b、em

是级联的，但是上下文环境如果变了，基准也会随之而改变。

c、百分比

与em差不多，只有处于em直接与文本大小相关的考虑时，使用em才更有意义。
在IE中IE会夸大实际应当调整的字体大小，可以设置

body{
    font-size:100%;
}

这样就不会有夸大的问题了。

d、rem

rem与em的区别在与rem的大小与根元素——HTML元素有关，能够避免发生在嵌套元素中的级联问题
兼容性可以看这个兼容性；更多的介绍可以看响应式十日谈第一日：使用 rem 设置文字大小.可以使用sass进行自计算，为了考虑兼容性，可以使用下列代码

span{
    font-size:16px;
    font-size:1rem;
}

如果在没有css预处理工具之前，rem由于考虑兼容性还是要修改所有的像素，但是由于类似sass之类的工具，这个问题就不会增加太多的成本，所以我们可以大胆的使用rem这个单位，但是并不是所有的样式都是适用rem。

6. 响应式图片

定义

详见Responsive Images 101, Part 1: Definitions

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.

其他的我建议阅读一下这一系列文章：《响应式图片101》

九.响应式性能优化

如何加快和优化响应式布局网站的页面加载速度
响应式设计的性能优化

十. 响应式的调试方式

1. chrome开发者工具调试

比较方便快捷的一种方式，但有时与真机会有一些差别。

2. adobe edge inspect adobe edge code

这个要安装两个软件，比较麻烦，一般不建议
响应式网站开发跨平台真机调试工具

3. Browsersync

重磅推荐Browsersync，非常的方便快捷，配合前端自动化流程工具，一修改代码，所有设备都实时刷新。要确保处于同一区域网内。
以下是可能用到的命令：

npm install -g browser-sync
browser-sync start --server --files="*" 

十一、需不需要响应式

1. 性能
   移动设备外部的样式表和脚本会严重降低站点的性能，不会被缓存，虽然隐藏了内容，但是标签和css仍会被下载。

2. 使用环境
   主要用户的使用环境

3. 内容协商
   根据内容的重要性去重新组织或者重构你的站点的内容。

4. 时间投入
   响应式网站需要花费更多的时间，如果项目时间很紧的话，要好好考虑一下。但是多花费的时间会在维护成本中得到弥补。

5. 支持
   浏览器支持，渐进增强和优雅降级

6. 广告

十二、题外话——关于响应式的替代方法

1. hash操作

随着现代浏览器市场份额的越来越多，hash操作的兼容性越来越好了，所以我们可以很方便的利用hash实现一个页面的碎片化，比如同是www.example.com这个网址的页面，我可以把其分解成三个子页面为www.example.com#page=1、www.example.com#page=2、www.example.com#page=3，把数据的拉取交给hash值，然后在移动端单独加载一个碎片页面如www.example.com#page=1，然后采取跳页面的方式转到www.example.com#page=2等，而在桌面端则一次性把几个hash值所控制的数据全都拉取下来在一个页面上展示，这样就用hash来操控桌面端与移动端的数据，使之更符合各自的情况。

2.UA检测

在客户端每一次请求数据的时候，都会告诉服务端自己的身份，也就是所谓的UA了，客户端JS可以获取UA值，服务端也可以获取UA值，利用UA值就可以识别各种终端，然后做页面跳转的工作了，这里可以依赖node很好的做UA检测与跳转。其原理基本是：客户端访问我们的URL，比方说www.example.com，用node获取请求request，然后判断其UA类型，根据UA浏览器再去后台拉取数据，后台数据返回给node，再由node返回给用户，虽然多了一个node环节，但是操作的灵活性也就高多了，这样对外只有一个URL，对内可以存在多个api，如api-pad.example.com、api-phone.example.com，对于内部可以是全数据的，然后再在node环节做UI封装，鬼道也建议在桌面端直接返回页面而在移动端返回数据，这样使得移动端更加轻量。

十三、学习资料

想学响应式设计？来看史上最全的响应式设计资源库
中国响应式网站分享

十四. 参考资料

1. Ethan Marcotte博客

2. Responsive or Adaptive Design – Which is Best for Mobile Viewing of Your 3. Website?

3. The SEO of Responsive Web Design

4. 《响应式Web设计实践》[美]Tim Kadlec著 侯鸿儒 译

5. 渐进增强和优雅降级之间的有什么不同？

6. screen sizes

7. 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法

8. What is the difference between “screen” and “only screen” in media queries?