响应式开发遇到的坑总结
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。但是坑也多多！
一、基础知识心得
1、加meta标签，将视口宽度设置为屏幕的宽度，并禁止缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">2、将所有的单位改成rem，我设置的是100px = 1rem，毕竟好算啊，不然那么多值我还得用计算器敲，然后分阶段用媒体查询重新设定比例，实现自适应。
html,body{ font-size: 100px !important;}@media only screen and (max-width: 1200px){ html,body{ font-size: 90px !important; }}@media only screen and (max-width: 992px){ html,body{ font-size: 80px !important; } }3、版心设置
在pc端版心是1200px，居中对齐在屏幕宽度小于1200px时，可以将版心设为95%，居中对齐，这样所有盒子左右都不会靠边，而且有一个统一的边距。
4、盒子的宽度设置
刚开始没有做响应式，所以盒子的宽度和高度都给的固定值，但在改的过程中发现这样对响应式一点也不友好，即使已经改成rem为单位，也会有很多问题。宽度尽量使用百分比（特别是多个相同的盒子处于同一排的时候）。
还有一些小盒子可以只给padding值，宽度和高度由内部子盒子来撑开，不然在响应式的时候有的子盒子就会被挡住。
5、水平垂直居中
position: absolute; top: 50%; right: 50%; transform: translate(-50%,-50%);不过发现这个方法用在图片上会使图片模糊，于是改成
.parent{ display: flex; align-items: center;}6、多个盒子按比例平均放置，就是稍微处理了bootstrap的栅格布局，因为希望在pc端不按照这种格式来显示
@media (max-width: 1200px) { .cyfw-wrapper .li-content ul.industry-list li{ -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; width: 100%; margin: 0 0 0.5rem 0; } }@media (max-width: 768px){ .cyfw-wrapper .li-content ul.industry-list li {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}}@media (max-width: 500px){ .cyfw-wrapper .li-content ul.industry-list li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } }7、图片的处理
img { max-width: 100%; height: auto;}.banner{background-size: cover;//等比扩展图片来填满元素 background-size:contain; //等比缩小图片来适应元素的尺寸}8、flex布局
flex布局真好用，不过有个bug我碰到好几次，当子盒子给定宽度时要加上flex-shrink: 0，禁止压缩，否则当其他子盒子的宽度超过剩余的宽度时这个被设置宽度的子盒子就会被压缩。
9、手机端的滚动条
手机端有时候一不留神就有了滚动条，要注意所有盒子宽度都不要超过页面的宽度，否则虽然显示正确（父盒子宽度等于页面宽度，子盒子内容被裁剪了），但还是会出现水平滚动条。
二、IE8以下的浏览器适配
响应式布局主要是为了在各种终端中能正常显示界面，主要是面向的手机、平板等用户的网站比较多采用，而面向PC端的网站很少使用，因为主流的显示器都比较大了，而且大多数网站都采用1000宽度，针对手机端等往往又会另外开发一套前端。因为响应式布局兼容性并不好，在IE8以下的浏览器中无法实现效果。大家宁愿采用1000PX以下宽度的页面。
最近新的项目中采用了宽屏1200PX的设计，这样就产生了一个问题，在1024*768的显示器上无法正常显示。所以我额外的写了调整的样式，针对小于1200PX宽度的显示屏，统一采用960宽度的样式。
<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="css/cloud_960px.css">针对IE8以下的兼容性，又再次引用了另外一个插件：
<!--[if lte IE 8]><script type="text/javascript" src="JS/respond.min.js"></script><![endif]-->respond.js大家可以在网上搜索到。应用后，在IE8以下的浏览器，如果判断了是窄屏幕，则会加载调整的样式。当然，有一个瑕疵，由于是JS载入后判断，所以可能会有延迟，稍微闪屏。不过这都是可以接受。
到这里，你以为一切貌似都解决了？
BUT…
你错了，我上传后发现另外一个坑爹的问题，页面上引用了瀑布流。载入页面后瀑布流先应用了样式，respond载入之后又判断是窄屏，再次应用了960的样式，这样就导致了瀑布流布局错乱。解决这个问题的办法：使用jquery的resize事件，判断容器宽度变化后，重新执行瀑布流。类似的问题都可以这么解决。
IE6\IE7\IE8测试正常，至于IE9以上支持media query，不需要额外的JS去判断。
二、关于Html5移动端适配不同分辨率的布局总结
关于现在比较流行的一些框架比如bootstrap，用得多的人会发现bootstrap确实在做扁平化风格的网站方面，提供了很大的便利，适配不同分辨率的pc端，包括能适配到移动端。但是就我个人而言，从pc端适配到移动端这种一整套的方式还是有所不妥的，毕竟pc端显示的内容相对于移动端来说是很多很繁琐的，而移动端显示的风格大多以扁平化为主，屏幕显示的内容也不宜过多过于繁琐，所以要想直接从pc端适配到移动端的这一整套流程下来，只适用于一些内容不多的扁平化小网站。
好了进入主题，今天主要说说html是怎么适配不同分辨率的手机的，bootstrap虽然适配了整个屏幕的大小，但是你会发现，无论在哪个分辨率底下，字体的大小都是不会变的，没有做到不同的分线率显示不同的字体大小，这会造成一个问题，比如说在iPhone6的屏幕分辨率下，可以正常显示一段文字，但是在iphone5的屏幕分辨率比较小，那么那段文字显示就会出现异常，这种情况在开发的过程中经常会出现。
那么怎么让文字适配不同分辨率呢，不多说直接上代码：
@media screen and (min-width: 320px) {html{font-size:17.06666px;}}@media screen and (min-width: 360px) {html{font-size:19.2px;}}@media screen and (min-width: 375px) {html{font-size:20px;}}@media screen and (min-width: 400px) {html{font-size:21.33333px;}}@media screen and (min-width: 414px) {html{font-size:22.08px;}}@media screen and (min-width: 440px) {html{font-size:23.46666px;}}@media screen and (min-width: 480px) {html{font-size:25.6px;}}@media screen and (min-width: 520px) {html{font-size:27.73333px;}}@media screen and (min-width: 560px) {html{font-size:29.86666px;}}@media screen and (min-width: 600px) {html{font-size:32px;}}@media screen and (min-width: 640px) {html{font-size:34.13333px;}}@media screen and (min-width: 680px) {html{font-size:36.26666px;}}@media screen and (min-width: 720px) {html{font-size:38.4px;}}@media screen and (min-width: 750px) {html{font-size:40px;}}@media screen and (min-width: 760px) {html{font-size:40px;}}@media screen and (min-width: 800px) {html{font-size:40px;}}@media screen and (min-width: 960px) {html{font-size:40px;}}以上是我自己总结的一段适配移动端的代码，安卓最大分辨率是750，那么我也以750为分界点，来设置项目的根字体大小。
那要怎么应用呢，主要是在单位的应用上，这里推荐使用rem，对rem不熟的朋友可以先去了解一下，如下给一个布局的例子，
比如在iphon6的分辨率为375，那么
.p{font-size:1rem}此时在iphone6屏幕上显示的字体大小就是120 = 20，也就是20px大小，而750的分辨率下的字体大小就是140 = 40，也就是40px大小，所以在布局的时候会涉及到px与rem两种单位间的换算问题，这里推荐一个在线小工具http://alurk.com/，这个可以一次性将px全部转为换rem，http://pxtoem.com/这个可以一个一个的转换，看具体需求了。