rem(媒体查询)布局

 

 

 

<

 《利用Bootstrap来进行响应式开发》

bootstrap链接：https://www.bootcss.com/

下载bootstrap,并且将文件引入

由于响应式开发首先要一个大容器，将要响应式的东西放在容器中；

利用Boostrap有现成的容器：

其自动帮我们写好了媒体查询

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

上面的类前缀，是规定每一个子元素站12份中的多少份

我上面这个代码的意思是：在大屏幕下(>=1200px)，每个子盒子站3份，在中屏幕下(>=992px)每个子盒子站4份

如果我只设置了col-md-4 则在>=992px的情况下都是这样的

《1.三格栏的嵌套》

 《2.列偏移》

《3.实现隐藏与显现》

 《4.实现效果展示》

《1.盒子之间有间隔的效果》

如：

这个是利用套盒子的思想做到的，即给外面受栅格系统控制的盒子中套盒子，利用padding值将子盒子挤开，

从图片看，栅格系统控制的盒子不能全部在左右两边，有padding挤了，可以如下解决：

《2.实现类似浮动到哪里去都可的效果》

利用学的列偏移，本身盒子站4份，再向右偏移了4份，就到中间来了;

《2.实战记录》

《1.关于设置continue的宽度》

这个意思是在屏幕>=1280px的情况下，continue的width为1280px;