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

一、为什么需要响应式设计（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.

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

对于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文件

### 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、remrem与em的区别在与rem的大小与根元素——HTML元素有关，能够避免发生在嵌套元素中的级联问题兼容性可以看这个兼容性；更多的介绍可以看响应式十日谈第一日：使用 rem 设置文字大小.可以使用sass进行自计算，为了考虑兼容性，可以使用下列代码span{    font-size:16px;    font-size:1rem;}如果在没有css预处理工具之前，rem由于考虑兼容性还是要修改所有的像素，但是由于类似sass之类的工具，这个问题就不会增加太多的成本，所以我们可以大胆的使用rem这个单位，但是并不是所有的样式都是适用rem。### 6. 响应式图片#### 定义详见Responsive Images 101, Part 1: DefinitionsA 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仍会被下载。1. 使用环境主要用户的使用环境1. 内容协商根据内容的重要性去重新组织或者重构你的站点的内容。1. 时间投入响应式网站需要花费更多的时间，如果项目时间很紧的话，要好好考虑一下。但是多花费的时间会在维护成本中得到弥补。1. 支持浏览器支持，渐进增强和优雅降级1. 广告## 十二、题外话——关于响应式的替代方法### 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博客1. Responsive or Adaptive Design – Which is Best for Mobile Viewing of Your 3. Website?1. The SEO of Responsive Web Design1. 《响应式Web设计实践》[美]Tim Kadlec著  侯鸿儒 译1. 渐进增强和优雅降级之间的有什么不同？1. screen sizes1. 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法1. What is the difference between “screen” and “only screen” in media queries?#html、响应式设计#

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！