响应式布局的一些心得

公司太坑，先是说不做响应式，然后做完了又要加响应式，简直坑死人了。
通过改成响应式的时候也事发现自己写样式时的一些不足吧，总结下来。

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值，宽度和高度由内部子盒子来撑开，不然在响应式的时候有的子盒子就会被挡住

水平垂直居中

 position: absolute;
 top: 50%;
 right: 50%;
 transform: translate(-50%,-50%);

不过发现这个方法用在图片上会使图片模糊，于是改成

.parent{
    display: flex;
    align-items: center;
}

多个盒子按比例平均放置，就是稍微处理了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%;
	 }
 }

5. 图片的处理

 img {
    max-width: 100%;
    height: auto;
}
.banner{
	background-size: cover;		//等比扩展图片来填满元素
	 background-size:contain;   //等比缩小图片来适应元素的尺寸
}

6. flex布局
   flex布局真好用，不过有个bug我碰到好几次，当子盒子给定宽度时要加上flex-shrink: 0，禁止压缩，否则当其他子盒子的宽度超过剩余的宽度时这个被设置宽度的子盒子就会被压缩
7. 手机端的滚动条
   手机端有时候一不留神就有了滚动条，要注意所有盒子宽度都不要超过页面的宽度，否则虽然显示正确（父盒子宽度等于页面宽度，子盒子内容被裁剪了），但还是会出现水平滚动条