css3弹性布局

响应式 wde设计-viewpor

优点：灵活性强 解决多个设备的适应问题

缺点：工作量打 效率慢 加载时间长

什么是viewport 是用户网页可视感　　区域　　

设置 viewport

   一个常用的针对移动网页优化的网页页面viewport meat标线

<meat name = "viewport" ontent="width = derice width initial -scale">

width : 控制viewport的大小

height : 和width相对应 来设定高度

initial -scale ： 初始缩放比例

max imum-scale ：设定最大比例

min imum -scale ：设定最小比例

user -scale ：手动缩放

响应式wed设计-网格视图

列的百分比 100%/12=8.33%

在每列指定 class=col- 用于指定每列有几个跨度

响应式wed 设计媒体查询

定义和使用 @media查询可以针对不同的媒体类型定义不同的样式

媒体功能

screen 用于电脑屏幕 平板手机

print 用于打印和打印预览

device-height 可见高度   width 可见高度

max-width 最大可见高度

min - width最小可见高度

orientation 横屏

portait 竖屏

响应式设及wed 设计 图片

当max -width 实行为100%图片永远不会大于原始大小

自适应background-size ：contain

延展整个区域 background-size ：100% 100%

背景图覆盖 background size：cover

flex 布局  弹性布局

flex不是单一属性  包括了一整套新的属性 包括设置容器和设置项目两部分

声明display：flex

容器属性

flex -dire ction通过设置坐标轴来设置项目排列

row 默认 从左到右  -reverse反向

col 从上到下 -  reverse反向 

flex-wrap 换行

nowrap  不换行 默认

justify-content主轴方向对齐

flex-stort 默认

center在主轴排列

flex-end项目对齐主轴终点

space-between-项目距离相等 第一个项目和最后一个项目起点和终点为0

space-arovnd：距离中间项目的一般

space -erenly 项目间距第一个项目离主轴起点和最后一个项目离终点距离等于项目间的间距

align- items 项目在行 中对齐方式

stretch：默认

flex-start：在行中居中对齐 center 在行中居中对齐

flex-end ：项目底部部分与行周终点对齐  baseline 项目的第一行文字基线对齐

align-content：多行排列时设置行在交叉轴反向上的对齐方式以及分配行之间的空隙

stretch：默认

项目属性

order：数值最小排列越靠前

flex-shrink：收缩项目属性性取值非负数

flex-grow：扩张项目属性取值非负数

flex-basis与width一起设置宽 但flex权重高