移动端布局

meta视口标签

<meta name="viewport"//视口
content="width=device-width,// 宽度=设备宽度
user-scalable=no//用户是否可以缩放
initial-scale=1.0//初始缩放比
maximum-scale=1.0//最大缩放比
minimum-scale=1.0">//最小缩放比

物理像素与物理像素比

物理像素->分辨率

物理像素比->开发尺寸：分辨率（常见电脑1px=1分辨率，手机不同）

背景缩放background-size

cover：完全覆盖（部分会看不见了）

contain：最大尺寸（完全看见，部分空白）

流式布局(百分比布局)

流式布局：百分比布局（不写死宽度）

为了防止页面缩放的时候内容掉下来，可以设置最大宽度max-width和最小宽度min-width

body｛
width：100%；
min-width：320px；（现在常用） 
max-width：（一般根据屏幕）
margin：0 auto；
｝

flex布局

flex布局在pc端兼容性不太好，但是在移动端基本都支持，所以如果是pc端布局，建议传统布局，移动端或者不考虑兼容性的pc端建议flex布局。

当父盒子设为flex布局后，子元素的float，clear，vertical-align属性将失效。

总结flex布局原理：就是通过给父盒子添加 flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction属性
①row（默认，从左到右）
②row-reverse（从右到左）
③column（从上到下）
④column-reserve（从下到上）

justify-content属性
①flex-start（默认）
②flex-end
③center
④space-between
⑤space-around

justify这个属性跟着主轴走

space-around这个是左右两边间隔小，两个子元素之间间隔大，因为平均分配，之间间距是左右两边都有

flex-wrap属性（子元素换行）
①nowrap（默认值，不换行）
②wrap（换行）
如果不设置，则默认都给你塞一行显示，塞不下就把子元素的宽度修改，再塞下。

align-items属性（侧轴子元素排列）【单行！】
①stretch （默认值，元素被拉伸以适应容器。）
②center（中心）
③flex-start（开头）
④flex-end（结尾）
⑤baseline（基线）

默认x轴为主轴，所以y为侧轴。如果设置主轴为y轴，则x轴为侧轴
垂直居中代码：

justify-content：center；
align-items：center；

align-content属性（侧轴对齐）【多行！】
①stretch （默认值，元素被拉伸以适应容器。）
②center（中心）
③flex-start（开头）
④flex-end（结尾）
⑤baseline（基线）
⑥space-between（元素位于各行之间留有空白的容器内。）
⑦space-around（元素位于各行之前、之间、之后都留有空白的容器内。）

flex-flow属性（就是flex-direction和flex-wrap的合写）
例如：

flex-flow：column  wrap；
=
flex-direction：column； 
flex-wrap：wrap；

flex布局子项常见属性

flex：子项目占的份数（定义子项目分配
【剩余空间】，用flex表示占多少份数） 例：flex=1；（默认为0）

align-self：控制子项自己在侧轴的排列方式
（类似align-items，可以单独控制一个）

order：定义子项的排列顺序（前后顺序）
（order：-1；则会移到前面，默认为0）

rem适配布局

em和rem

em是相对于父元素的字体大小来说的

rem是相对于HTML元素的字体大小

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制

em代码例：

<div><p></p></div>
div{font-size：10px；} 
p｛width：10em；height：10em；｝
=
width：100px；height：100px

媒体查询

可以根据不同的屏幕尺寸改变不同的样式

例：当屏幕宽度大于800px时，没有背景色
当屏幕宽度大于800px小于500px时，pink色
当屏幕宽度小于500px时，purple色

媒体查询引用资源

less

定义变量：【@变量名：值；】

less编译

easy less插件可以将写完的less文件在保存时转换为css文件，并且修改less文件可以自动修改css文件，直接在html文件中引用css文件就行了。

less嵌套

less运算

数字，颜色，变量都可以进行运算(+ - * /)

less文件中导入less文件

@import “要导入的文件名字”；

响应式布局

1. 响应式布局是不需要单独写移动端页面的
2. 响应不同的设备来发生变化
3. 原理（利用媒体查询！）

bootstrap

bootstrap布局容器

bootstrap栅格系统

代码:

效果：

列嵌套

列嵌套最好再加一个行row

列偏移

列排序

. col-md-push-数字（往右推几份）
. col-md-pull-数字（往左拉几份）

响应式工具

. hidden-xs（在超小屏下隐藏，其他显示）
. hidden-sm（在小屏下隐藏，其他显示）
. hidden-md（在中屏下隐藏，其他显示）
. hidden-lg（在大屏下隐藏，其他显示）
. visible-（只在某个显示，同hidden）

修改container最大宽度

bootstrap默认最大为1170px，所以当我们自己的设计稿是1280px，不一样时，手动修改

@media screen and (min-width：1280px)｛
	. container｛
		width:1280px;
	｝
｝

（其他的还是由bootstrap决定，除了大于1280px时）

制作引入字体图标

bootstrap官网-组件-复制图标下的类名，加入到要加的标签中（相当于加个::before）
没对齐的话，css中把它当成::before写样式

移动端总结

流式布局（百分比布局）
flex弹性布局（推荐）
rem适配布局（推荐）
响应式布局