43 lines
1.2 KiB
Plaintext
43 lines
1.2 KiB
Plaintext
移动端兼容：
|
||
|
||
|
||
布局兼容
|
||
1：媒体查询
|
||
2：flex
|
||
|
||
尺寸兼容
|
||
1：100%
|
||
2: rem
|
||
|
||
2 * 50
|
||
真实的尺寸 = 你写的rem数值 * html上的基准数值（font-size）
|
||
|
||
|
||
flex
|
||
|
||
新布局方式，可以实现更多的多终端兼容效果
|
||
|
||
13 css属性
|
||
|
||
display: flex
|
||
|
||
应用在父元素上 6个
|
||
justify-content 设置元素在 X 轴上的对齐方式
|
||
flex-wrap 设置元素一行放不下的时候是否换行
|
||
align-content 设置元素在 Y 轴上的对齐方式（多行）
|
||
align-items 设置元素在 Y 轴上的对齐方式（单行）
|
||
flex-direction 设置元素的排列方向，注意如果设置了column（垂直），那么 justify-content 和 align-items
|
||
作用相反。
|
||
|
||
|
||
flex-flow: flex-direction flex-wrap
|
||
|
||
应用在子元素上 6个
|
||
order: 设置元素的顺序，数值越小越靠前
|
||
flex-basis 设置元素的宽度，类似width
|
||
align-self
|
||
|
||
|
||
flex-grow 设置元素的放大比例，数值越大，所占空间越大
|
||
flex-shrink 设置元素的缩小比例，数值0，不缩放
|
||
flex: none(flex-grow) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |