C3响应式web设计

1、viewpoint（可视区域）

优点：面对不同分辨率设备灵活性强，解决多设备显示适应问题

缺点：工作量大，效率低下，代码冗余，会出现隐藏无用的元素

width：控制viewport的大小，可指定值

device-width：设备的宽度（单位缩放100%时的css像素）

initial-scale：初始化缩放比例，页面第一次load时的缩放比例

maxmurn-scale：允许用户缩放最大比例

minmurn-scale：允许哦用户缩放最小比例

user-scalable：用户是否可以手动缩放

网格试图

通常是12列，宽度为100%，浏览器大小伸缩时会自动调整

确保所有元素都有box-sizing：border-box；怪异盒模型

在每列指定class ="col-"用来定义有几个跨度

媒体查询

语法：@media only mediatype and | not（media feature）{css样式}

媒体类型：print 用于打印机盒打印预览

screen用于电脑屏幕，平板，手机等

device-height 定义输出屏幕可见高度

device-width 定义输出屏幕可见宽度

max-width 定义设备页面最大可见区域宽度

min-width 定义设备页面最小可见区域

偶人塔体on 定义输出设备中的页面可见高是否大于等于宽度

例： @media only screen and （max-width：500px）{

bady{ background-color : red; }

}可见区域最大为500px时  body背景色红色

C3响应式web设计-图片

max-width：100%； 永远不会大于原始大小

background-size：contain；背景图按比例自适应

background-size：100%  100%；背景图覆盖整个区域

background-size：cover； 保持比例铺满

不同设备显示不同图片也是可以设置的

基本布局方法---flex布局

display：flex；

flex-direction：row默认值，从做到右排列

flex-direction：row-reverse 从右到左排列

flex-direction：column 从上到下排列

flex-direction：column  从下到上排列

flex-wrap：nowrap  默认不换行，如果内容太多溢出容器

flex-wrap：wrap  单行容不下换行

flex-wrap：wrap-reverse   反方向换行

justify-conten：flex-start 默认株洲起点，无空隙

justify-conten：center居中，无空隙

justify-conten：flex-end主轴终点对齐无空隙

justify-conten：space-between 起尾无空隙，中间空隙相等

justify-conten：space-around  起尾空隙为中间空隙一半

justify-conten：space-evenly所有空隙相等

 align-item属性（单行对齐）

align-items：stretch  拉伸到填满行高

align-items：flex-start 顶部与行七点对齐

align-items：center 项目在行中居中

align-items：fiex-end 项目在底部与行终点对齐

align-items：baseline 基线对齐

align-content属性（多行对齐）

align-content：stretch默认未设置项目尺寸，项目拉伸至填满交叉轴，设置了尺寸，项目尺寸不变，项目行拉伸

align-content：flex-start首行在交叉轴七点开始，行间无空隙

align-content：center首交叉与尾交叉距离相等

align-content：flex-end 尾行在交叉终点，无空隙

align-content：space-between 行间距相等，首位间距0

align-content：space-around 行间距相等，收尾间距尾中间的一半

align-content：space-evenly首位和行间距相等

项目属性flex-grow：0；扩张因子

flex-basis  为row/row-reverse时，与width同在，优先于width。为column或column-reverse时与height同在，优先于height，注：非auto优先。

flex-shrink：1；收缩因子

flex：      上面简写

align-self用于覆盖容器的align-items。做对项目对齐处理为auto时，继承容器的align-items值，当容器无align-items时，属性值为strech.

order:0;数字越小，越在前