响应式设计我的的一些总结

1、为何须要响应式设计（responsible web design）

1. 响应式发展背景

一、屏幕尺寸的快速变化，iphone为320x480，分辨率在将来能够继续发展。
二、网速对于用户的web使用体验有着巨大的影响。
三、对于标准的支持。浏览器对于标准的支持也颇有限。
四、输入的方式。触屏设备，各类手势操做。
五、使用的环境。设备在物理上和架构上的特性，并非咱们在针对设备进行设计时须要考虑的惟一因素。了解使用环境是从相应设备的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

如今都是把这两种布局混合起来使用，刚开始咱们是按照几个主要的屏幕分辨率作出设计稿，在重构过程当中是按照响应式设计的特色，确保其可以在各类屏幕分辨率中都可以正常显示。
折衷的方法，确保在主要的分辨率屏幕上的效果与设计稿彻底一致，可是在其余比较次要的分辨率下，很难保持一致，特别是一些采用百分比的元素，因此这时候的对齐只能寄但愿于左、右、居中对齐。

2、响应式设计的优势和缺点

1.优势

• 适应全部设备，更容易管理。

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

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

• 易于营销：网站在移动设备上显示，对于营销部门来讲不须要增长额外的工做量。

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

2. 缺点

• 一个网站：让一个网站适配全部网站，对于你来讲很容易，但不必定适合你的用户。你须要在同一个页面上展现不一样的侧重点，以便使用该平台的最大优点，最大限度的提升你的转化率。

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

• 用户体验：移动端和PC机上的用户体验是彻底不一样的。因此一个网，甚至是响应式设计，在两个平台上都会损害您总体的UX。若是你试图使用相同的界面来知足移动和桌面的两个平台的用户使用，到最后可能谁都没法知足。

3、响应式与seo

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

2. 因为存在不一样的网站，因此有一个版本的问题，网站版本错误可能会致使游客到以前的版本。

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

4、响应式设计的观点

1.优雅降级(Steven champeon)

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

2.渐进加强(NickFinckProgressive Enhance)

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

3.两种设计方式

如今有两种设计观点，移动优先和桌面优先。
从桌面开始向下设计、 从移动端开始向上设计
两种观点主要因为面向的主流对象的不一样，优雅降级主要是面向pc端为主流。如今工做室采用的就是优雅降级。
移动优先是从移动端开始，而后再逐渐向桌面端适应。

4.设计要点

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

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

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

• 增长一个断点是否可以提高设计

• 是否能够针对某一给定设备加强使用体验

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

5、响应式的设计稿

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有更多详细内容，能够参见下方的参考资料连接。

八. 响应式布局

一、固定布局

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

二、流体布局

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

三、弹性布局

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

四、混合布局

几种布局的集合。

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="*"

11、需不须要响应式

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

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

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

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

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

6. 广告

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

1. hash操做

随着现代浏览器市场份额的愈来愈多，hash操做的兼容性愈来愈好了，因此咱们能够很方便的利用hash实现一个页面的碎片化，好比同是www.example.com这个网址的页面，我能够把其分解成三个子页面为www.example.com#page=一、www.example.com#page=二、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封装，鬼道也建议在桌面端直接返回页面而在移动端返回数据，这样使得移动端更加轻量。

十3、学习资料

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

十四. 参考资料

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?