视口和多倍图
视口概念：
视口就是浏览器显示页面内容的屏幕区域，视口可以分为：布局视口、视觉视口和理想视口。
理想视口：
使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺存
需要手动来添加<meta>标签来进行视口的设置
meta视口标签的主要目的：
布局视口的宽度和理想视口的宽度一致，简单来说就是设备有多宽，我们的布局的视口就有多宽
视觉视口
指用户正在看到的网站的区域，注意：是正在看到的网站区域，我们是可以通过缩放去操作视距视口里面能看到的内容的，但是不会影响布局视口，布局视口仍然采用的是原来的宽度。
meta标签
物理像素和物理像素比
多倍图
二倍精灵图的使用
移动端开发的选择和技术方案
移动端的主流方案
1、单独制作移动端网页（主流）
2.响应式的方式来制作网页
浏览器的兼容问题
1、移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit兼容性即可
2.移动端里面我们可以放心的去使用HTML5 和 CSS3的样式
3.同时我们的浏览器的私有前缀只需要考虑添加webkit即可
4.移动端的公共样式文件
移动端的常见布局
1.移动端单独制作（主流）
2、响应式（次要布局方式）
流式布局
1.流式布局就是百分比布局，也叫做非固定像素布局
2.通过盒子的宽度设置为百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制
Flex布局
1.传统布局和flex布局对比
传统布局：兼容比较好，布局繁琐。局限性，在移动端布局的效率不高
Flex布局：1.操作方便，布局简单 应用广泛。2.PC端的浏览器支持情况不是很好。3.如果PC端页面布局不考虑兼容性或者移动端 可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。
2.Flex的布局原理
Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局
当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
采用flex布局的元素称为Flex容器（flex container），简称“容器”。 它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。
核心：通过给父元素添加flex属性来控制子盒子的排列方式
3.Flex布局父项常见属性
flex-direction 设置主轴方向
row、row-reverse
clomum、clomum-reverse
justify-content 主轴子元素的排列方式
flex-start 主轴X轴，从左到右。y轴：从右到左
flex-end: 尾部开始排列
center:所有子元素沿主轴进行居中对齐
space-around: 子元素平分剩余空间
space-between: 两边元素贴边，其他元素平分剩余空间
flex-wrap 元素是否换行
align-items 设置侧轴上子元素的排列方式（单行）
flex-start:侧轴的头部开始
flex-end:侧轴的尾部开始
center：让子项沿侧轴居中
strentch:让子元素拉到和父亲一样的高度
align-content 设置侧轴子元素的排列方式，（多行）
flex-start:沿侧轴的顶部开始排列
flex-end: 在侧轴的底部开始排列
space around:子项沿侧轴平分剩余空间
space-between:子项两侧先贴边，然后再平分剩余空间
strench:设置子项元素高度平分父元素的高度(前提是子项不能设置高度)
flex-flow 是flex-direction 和 flex-wrap的复合属性
Flex布局子项常见属性
1.flex子项占的份数
2.flex子项占的份数:给子项直接设置flex:1; 每一个子项就可以平分父项的空间了
如果父元素中有一个子项有自己的宽高，那么就是在该子项宽高占用的空间后的剩余空间内 其他子项在平分空间
lign-self控制子项自己在侧轴上的排列方式
单独控制某一个子项的排列方式，可以覆盖align-items属性
order属性来定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认值0
|
