自适应页面

CSS3 媒体查询 media queries

常用匹配特征 media features
width/height: 浏览器宽高
max-width： 表示小于最大宽度时生效
min-width： 表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高
resolution: 设备分辨率
orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时

@media (min-width: 700px) and (orientation: landscape) {
 ...
 }
//表示最小宽度限制在700px，当浏览器宽度大于等于700px且为横向时CSS代码生效

媒体查询引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

Flex布局

3.flex container容器的6个属性
flex-direction 方向 row(行排列默认)/row-reverse/column(纵向)/column-reverse
flex-direction:row时主轴为X方向/column时主轴为Y方向

flex-wrap 换行 nowrap(默认不换行)/wrap/

flex-flow 上面两个属性的简写 flex-flow:row wrap 上面两个属性可写成一行

justify-content 主轴对齐方式 :
*space-between(多余空间放中间)
space-around(多余空间放两边)
flex-start(item元素靠近主轴起点)
flex-end(item元素靠近主轴终点)
center(item元素居中)*

align-items 交叉轴对齐方式
*stretch伸展(默认值，前提是item元素宽/高度不确定)，所有元素宽/高度都撑满整个container
flex-start(item元素靠近交叉轴起点)
flex-end(item元素靠近交叉轴终点)
center(item元素居中)
baseline (item元素第一行文字的baseline对齐)*

align-content 多轴线在交叉轴方向的对齐方式（多行/多列），为什么不是主轴，因为已经换行了是多行啊。
flex-start item靠近交叉轴起点
flex-end item元素靠近交叉轴终点
center item元素靠近交叉轴中心点
space-between item元素与交叉轴两端对齐
space-around item元素每根轴线两侧间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch (默认值)item元素占满整个交叉轴

flex item的6个属性
order item元素的顺序

flex-grow 有多余空间item元素分配比例，默认为0即不放大

flex-shrink 空间不够时item元素收缩比例，默认为1即缩小一倍

flex-basis 指定item元素在分配多余空间之前占用主轴大小main size（px/%）,默认auto即项目本身大小

flex 上面三个属性的简写，注意顺序

align-self 指定单个item元素自身的对齐方式，可覆盖align-item属性，默认auto继承align-item的属性
*flex-start
flex-end
center
baseline
stretch*

栅格系统

2.定义不同屏幕尺寸时grid不同的css class名称，比如:
默认屏幕尺寸时使用:grid-df-1,grid-df-2
屏幕小尺寸使用：grid-sm-1,grid-sm-2
屏幕中等尺寸使用：grid-md-1,grid-md-2
屏幕大尺寸使用：grid-lg-1,grid-lg2

3.用媒体查询

@media screen and (min-width:768px){
    ......
}