响应式设计
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
开始
基本的思路
图片自适应
- 去掉高度和宽度，只给一个max-width
- 固定宽度或高度，使图片按照自身比例缩放
- 固定宽度或高度，使图片按照自身比例缩放
- 使用容器的padding-top来实现(积木中的等比实现方式)
- 等等
字体自适应
- em 相对当前元素的font-size， 如果当前元素没有设置，则继承自父元素
- rem 固定根元素上字体大小，其他字体跟随缩放
- vm, vh 这两个兼容性不大好，而且感觉用起来的场景不多
显示或者隐藏内容
- display:none 一般实现是在A端上展示在B端上隐藏，或者一块内容使用两种展现形式，其中一种只在A端显示，另外一种只在B端展示
不建议后面一种方式，两套代码，很蛋疼
排版和布局
- 通过样式在多端呈现不同的效果 ，如栅栏来实现内容块的等比缩放、或流式布局里面内容依次排列下来
- 禁止缩放，避免如iphone上显示整个页面
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />实现方式
图片类
一般是想通过各种方式来实现弹性图片的效果，在实现原理中也提供了几种方案，这里具体说明
css3伪类
其实这个和图片好像没关系，但是公众号上面可以看到一些简单的图行，如录播课btn、尖括号、人数的图标可以用伪类实现，这样就省去了图标的请求了，而且绝对不会模糊。 下面展示的直接是一个小人的伪类写法，效果看这里
<i class="i-people"></i>
.i-people:before {
border-radius: 3.5px;
width: 5px;
height: 5px;
left: 3px;
top: 0;
}
.i-people:before, .i-people:after {
content: '';
display: block;
position: absolute;
border: 1px solid #bbb;
}padding-top，padding-bottom的妙用
比如一般课程卡片是16:9的，而要实现等比缩放可以这么做。原理就是padding的值是基于自身的宽度来的
<div width=200>
<img/>
</div>
div {
padding-top:56.25%
}
img {
width: 100%;
height: 100%;
}SVG
可缩放的矢量图形，和算法有关，做图标很爽，所以只能做一些偏简单的图形，图像就算了
三方库，如polyfill
<img src="path-to-default-image.jpg" alt="响应式图片的3种解决方案" alt=""
srcset="path-to-default-image.jpg 600w 200h 1x,
path-to-another-image.jpg 600w 200h 2x,
path-to-a-third-image.jpg 200w 200h">譬如：path-to-another-image.jpg 600w 200h 2x，说明可以在屏幕最小宽度600最小高度200情况下且支持retina情况下展示该图片，很强大。积木中的课程卡片采用这种处理方式。 项目地址
一种新的图片格式
flashpix可以根据浏览器发出的请求返回合适尺寸的图片
布局类
栅栏
这个业内有很好的实现，如bootstrap，很容易找到demo看。 算是当前积木系统中的课程卡片的核心原理了，通过将屏幕宽度分成12份，每块内容占制定的份数来展示内容。
这里开发老师模块的时候发现，交互和设计不按常理出牌，一块内容占3块嫌少，占4块嫌多，然后就很尴尬了。
流式布局
这种一般界面比较简单，百分比来控制，一般不够位置挤下来就是了
媒体查询
通过检测屏幕的宽度，从而在不同宽度下通过不同的样式来显示页面。比较方便。
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}下面这种写法挺吸引人的，省却了js判断，但是对于移动端或pc chrome&ff下支持，而IE6-8下面则需要引入一个js来hack下。（js文件压缩后是4.5kb，gzip后应该更小，可以尝试）
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />js控制
通过js来控制显示，会多出不少控制代码。 这里一般不会处理太细腻的操作，一般是布局方面的东西，或者就做pc或h5的分支，不会做的太细，否则代码难以维护。 比如积木中使用这个来判断移动端加载哪些css，pc端加载哪些css。
其他方案
- 两套代码，根据UA来判断显示哪套，这个实现了响应式的效果，但是和我们讨论的响应式有点远。
总结
- 响应式是一整套的东西，需要从产品-设计-开发整体来规划。遵循响应式设计的原则（如布局、元素变化呈现），在代码开始之前的大框架需要规划好。
- 代码规划方面。由于响应式是多套代码，如何组织代码对后续维护影响很大。
- 响应式的性能需要重点关注。如文件大小、资源加载情况、请求合并、图片大小等。