一.媒体查询
  • 通过媒体查询+栅格实现屏幕缩小时div不同列显示
  • 给div加上float：left，宽度设定百分比达到自适应效果
/* 更大设备 */
@media screen and (mim-width: 1281px) {}
/* 笔记本或PC */
@media screen and (min-width: 1024px) and (max-width: 1280px) {}
/* ##平板电脑/Ipad竖屏 */
@media screen and (min-width: 768px) and (max-width: 1023px) {}
/* 多数竖屏的智能手机 */
@media screen and (min-width: 320px) and (max-width: 767px) {}
/* 公共 */
@media screen and (min-width: 320px) and (max-width: 1023px) {}
二.栅格系统

框架

构造

<div class="name fluid">
    <div class="container">
        <div class="row">
            <div class="md6 sm6 xs6">
                <div>
                    内容
                </div>
            </div>
            <div class="md6 sm6 xs6">
                <div>
                    内容
                </div>
            </div>
        </div>
    </div>
</div>
// fluid：宽度为100%。container：版心
//row：行。md sm xs：不同设备情况下的列

技巧

1.给父盒子添加text-aligin：center属性，当屏幕缩小时，自动居中。
2.给图片添加max-width：100%，实现图片自动适应的效果
3.利用媒体查询是div在不同试图屏幕下描写不同样式
4.container默认有版心，去掉后占满屏幕
5.调整md内边距来达到定位的效果(md里面的设定一个div块级标签设置宽高，背景值)
6.给div清理浮动防止文本流漂浮
7.
xs (手机<768px)  
sm (平板≥768px) 
md (桌面≥992px) 
lg (桌面≥1200px)

三.弹性盒子 四.rem布局