自适应

一.媒体查询

• 通过媒体查询+栅格实现屏幕缩小时div不同列显示
• 给div加上float：left，宽度设定百分比达到自适应效果

/* 更大设备 */
@media screen and (min-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) {}

二.栅格系统

框架

• 基于layui的栅格
• 基于bootstrap的栅格
• 基于element-ui的栅格

构造

<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)

三.flex布局（弹性盒子）

设置在父盒子上：

		//前提：
                display：flex
                //排列方向:
		flex-direction
                 //如何换行:
		flex-wrap
                //flex-direction属性和flex-wrap属性的简写形式:
		flex-flow
                //项目在主轴上的对齐方式:
		justify-content
                 //在交叉轴上如何对齐:
		align-items
                 //定义了多根轴线的对齐方式:
		align-content

设置在(项目属性)子盒子上：

order，flex，align-self

eg:

html

		<div id="box">
			<div class="box_one">
				
			</div>
			<div class="box_two">
				
			</div>
		</div>

CSS

			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}
			#box{
				display: flex;
				justify-content: center;
				width:100%;
				/* background-color: skyblue; */
				height: 250px;
				margin: auto;
			}
			.box_one{
				/* order定义排列顺序 */
				order: 2;
				width: 30%;
				height: 200px;
				background-color: #000000;
			}
			.box_two{
				order: 1;
				/* flex:1 默认占据剩余空间 */
				flex: 1;
				height: 100px;
				background-color: #00ff7f;
				/* align-self给盒子单独设置对齐方式 */
				align-self: center;
			}

四.rem布局

五.viewport

    <!-- 使用viewport可以自适应缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">