响应式布局

display : flex ; 弹性盒布局

flex:1; 此元素在弹性盒中占多少比例

 

flex-direction 伸缩流方向

设置一个主轴方向，弹性盒内的元素以此方向排列

row 水平方向，从左到右排列

row-reverse 水平方向，从右到左排列

column 垂直方向，从上到下排列

column-reverse 垂直方向，从下到上排列

 

flex-wrap 伸缩换行

nowrap 默认值，不会换行

wrap 会换行

wrap-reverse 会换行，但是会颠倒顺序

 

justify-content 主轴(水平)对齐

flex-start 向左边靠

flex-end 向右边靠

center 向中间靠

space-between 第一个元素向左边，最后一个元素向右边

space-around 平均分配在其中

 

align-items 侧轴(垂直)对齐

flex-start 向上靠

flex-end 向下靠

center 向中间靠

baseline 以第一行的文字基线对齐

stretch 默认值，拉伸元素，填满上下

 

可以通过媒体类型为不同设备指定不同样式

方式一：

@media 媒体类型{
 
}

方法二：

< link rel="stylesheet" href="style.css" media="媒体类型" />

 

媒体类型：

all 所有设备

braille 盲文触觉回馈设备

embossed 盲文打印机

handheld 便携设备

print  打印用纸或打印预览图

projection 投影设备

screen 电脑显示器

speech 语音或者音频合成器

tv 电视机

tty 使用固定密度字母栅格的媒介

 

媒体特性是css3对媒体类型的增强版

@media 媒体类型 and (max-width:500px){
 
}
< link rel="stylesheet" href="style.css" media="only screen and (max-width:500px;)" />

媒体特性通过min/max来表示小于，大于

 

device-width 设置屏幕的输出宽度

device-heigh 设置屏幕的输出高度

width 渲染界面的宽度

height 渲染界面的高度

orientation 横屏或竖屏

resolution 分辨率

color 色彩的字节数

color-index 色彩表中的色彩数