不同屏幕大小的适配

移动端布局

viewport (视口)

定义：浏览器显示页面内容的屏幕区域
在不同大小的屏幕下，视口是不同的

语法:

user-scalble 表示用户是否可以缩放（0-no,1-yes）
initial-scale 表示初始缩放比例
maximum-scale 用户对页面的最大缩放比例
minimum-scle 最下缩放比例

移动端常见布局

流式布局（百分比布局）

flex弹性布局

对比传统的页面布局，
flex操作简单，布局方便，移动端使用广泛但在pc端布局浏览器支持较差

特点:
任何一个标签都可以使用flex标签成为容器，
其子标签的clear,float,vertical-align等属性会失效
通过行与列的思想布局

采用flex布局的元素被称为flex容器（flexcontainer）简称容器
它的子元素成为flex项目（flexitem） 简称项目

容器属性

flex-direction

确认主轴的选择 
特点：把主轴确认，元素默认按照确认的主轴方向进行排布
 语法: flex-direction:   row // 默认值 

值	示意
row	从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

控制主轴上的元素的各种各样的对齐方式 类似：word里的左对齐，右对齐，居中对齐，分散对齐； 语法：justify-content:flex-start //默认值

值	示意
flex-start	从头部开始（例；x轴是主轴即是从左到右）
flex-end	从底部开始
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先把两边贴边再平分剩余空间

flex-wrap

控制子元素是否换行；
语法：flex-wrap:nowrap /* 默认值 ；
flex-wrap:nowrap; 子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置

flex-wrap:wrap; 换行； 子项的总宽加起来超过父级宽度，就会换行

align-item

该属性是控制子项单行在侧轴（默认是y轴）上的对齐方式**(在子项为单项（单行）的时候使用**)

整体一行元素看成整体，设置在侧轴上的对齐方式

值	示意
flex-start	从上到下
flex-end	从下到上
center	挤在一块居中
stretch	拉伸

align-content

设置子项在侧轴上的排列方式 ，(用于子项出现换行的情况或者多行)

值	示意
flex-start	在侧轴上从上到下
flex-end	在侧轴上从下到上
center	在侧轴上居中
space-around	在侧轴上平分剩余空间
space-between	在侧轴上先把两边贴边再平分剩余空间
stretch	在侧轴上平分父类空间（拉伸）

项目属性

.item {
// 百分比或者是1~10的数字
flex: 20%}（//或者 2;

align-self

控制子项，自己在侧轴上的对齐方式；
默认值auto，父级设置了align-items ，auto继承父级元素上设置侧轴的对齐方式：align-items 属性； 如果父级没有设置align-items 属性，auto默认值会变为strecth

值	示意
flex-start	在侧轴上从上到下
flex-end	在侧轴上从下到上
center	在侧轴上居中
stretch	侧轴上拉伸

移动端适配

媒体查询

根据屏幕不同的大小 变换
比较生硬

max-wudth = x 表示小等于
如果要设置400 以下 的就要用399
第二个 由于后面有 别的屏幕 限制 可以省略 min-wudth

rem

rem是一个相对单位
作用：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
方案：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大 小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
用法:rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值 的地方都可以实现控制； root: 1rem代表HTML的font-size大小；

不能计算 如果要使用比较有小数之类的计算 可安装 easy less 扩展

响应式

版心：
浏览器显示内容与屏幕之间的留白
（更加好看，优化用户体验）

BootStrap

BootStrap框架 可非常快地搭建出响应式页面；
中文网：http://www.bootcss.com/