前端响应式原理：利用box-sizing，rem（或者百分比），媒体查询，弹性布局进行响应式开发总结

近几年来，移动页面的开发逐渐成为大势所趋，而pc端界面却又不可忽视，所以前端响应式设计逐渐流行。目前来讲，大家都在用bootstrap去做一个pc端和移动端的响应式设计，但是bootstrap的虽然方便，但是在用户体验上却差强人意，尤其涉及到高交互，高要求的响应式需求，bootstrap渐渐感到力不从心。

所以，要想设计出高品质的响应式设计界面，一定要另觅诀窍。现在写写我的心得。

响应式设计步骤：

1、明确需求。确定网页要适应的终端（是移动端还是手机端，他们的分辨率大小），而更多的时候是UI告诉你整个屏幕大小的尺寸呢。比如pc端要求你在1200px上进行页面的设计，同事要适应其他的尺度，比如1400px,1500px，这就要你根据自己设计的内容想想媒体查询的断点应该设置在哪个尺度比较好。而移动端的设计先以一种大众的机型去设计，在对其他机型进行微调。

2.将通用样式加上一个box-sizing：broder-box，这样做的目的是为了固定盒子的大小，不至于盒子因为内容的变大而撑坏了布局，毕竟怪异盒模型关注的是盒子的大小，而不是内容的大小，margin>broder>padding>content。

3、确定布局。我建议采用弹性布局，因为弹性布局比较稳固，不会发生因行大小的改变而将某元素随意换行的情况。

4、设置html的字体大小，确定开发中所有的尺度都用rem或者百分比来进行描述。

5、先在一个屏幕尺寸下进行开发，注意开放时千万避免使用px。

6、开发完成某一尺度之后，在修改断点下的font-size大小，然后慢慢调整每一个断电下的页面。

7、弄完了之后。一个响应式的静态页面设计大功告成，接下来只用关心页面的交互，渲染，性能，安全的问题就可以了。