web移动端流失布局和flex布局：
浏览器的现状
pc端常用浏览器：360，谷歌，火狐，
移动端常用浏览器：uc、qq、百度、搜狗、谷歌
总结：
国内的浏览器一般都是根据webkit修改过来的内核，如果要照顾兼容性，只处理webkit内核浏览器即可。
手机屏幕现状：
安卓设备的分辨率：
480*800、480*854、720*1280、1080*1920、还有2k和4k。
苹果设备的分辨率：
640*960、640*1336、750*1334、1242*2208等等
作为开发者，我们不需要重点关注这些分辨率，因为我们常用的单位是px
移动端的调试方法
chrome devtools 谷歌模拟手机调试
直接单间本地web服务器，手机访问即可。
直接使用外网服务器，用ip来访问
视口：
概念：就是浏览器显示页面内容的屏幕区域，可以分为视觉视口、布局视口、理想视口。
布局视口：layout viewport 移动端的浏览器一般都默认设置了一个布局视口，用于解决早期的pc端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以PC端页面大多都能在手机上呈现，但是元素看上去很小，可以进行手动缩放。
视觉视口（visual viewport） 用户正在看到的网站的区域，操作视觉视口的时候，不会影响布局视口
理想视口：（ideal viewport）：为了使网站在移动端有最理想的浏览和阅读宽度而设定的。理想视口是设备最理想的视口尺寸。需要使用meta视口标签来通知浏览器操作。理想视口就是布局视口的宽度修改为视觉视口的宽度。
meta标签的介绍：
maximun-scale minimum
物理像素是指屏幕显示的最小颗粒，是物理上真实存在的，在出场的时候就设置好的。iphone6的分辨率是750*1334。
我们开发的时候用的单位是px，1px不一定等于一个物理像素。
1个px能显示的物理像素点的个数，叫做物理像素比
如果把一张100*100的图片放到手机里面，会按照物理像素比缩放
物理像素比的计算方式，用设备的物理像素分辨力除以开发尺寸，比如iphone的屏幕750*1334 开发尺寸为375*1334 所以像素比是2
多倍图
对于一张50px*50px的图片，在手机上打开，按照二倍的物理像素比会将图片进行放大，从而变模糊。处理方式是将一个在pc端是100px*100px的图片先缩小为50px*50px，再将图片在移动端导入即可。
背景缩放：
background-size背景缩放 背景图片的宽度也可以写背景图片的高度，单位可以是单位或者百分比。cover、contain
使用px值来进行缩放，第一个值代表宽度，第二个是高度。如果只写一个值，代表只设置一个值，高度进行等比例缩放
用百分比来进行缩放的话 百分比值得是盒子的宽高
第一个值代表宽度
cover将突变等比例拉伸，直到可以覆盖整个盒子全部覆盖为止，可能会超出盒子。
contain图片等比例进行缩放，宽高有一个达到盒子宽高，就不会再放大
移动端的开发选择和技术方案
主流方案：
单独制作移动端页面（主流）：结构样式不同。
网址前面会有m，代表mobile
打开设备时，自定进行判断，若果是PC端就显示PC端，如果是移动端设备，，就跳转到端页面。
pc端和移动端是两套页面
响应式网站：pc端和移动端是一样的
pc端和移动端公用一套网站，在不同的屏幕下网页的样式会自动进行适配。
例如：三星官网
移动端的技术解决方案：
1、移动端浏览器的兼容问题。
国内的浏览器基本都是以webkit内核为主，因此值考虑webkit内核的兼容性即可。
webkit完全支持h5和c3，我们可以放心使用他们。
2、移动端的公共样式，一般推荐使用normallize。css文件，
优点：保护了有价值的默认值，修复了一部分浏览器的bug，模块化的，拥有详细的文档。
3、如果不考虑兼容性，可以大量使用css的盒子模型，，如果pc端需要多浏览器完全兼容，就需要使用传统模式，不考虑兼容性或者在移动端，都乐意使用css3 的怪异盒子模型 box-sizing：border-box;
4、移动端的特殊样式
box-sizing：border-box;
照顾webkit兼容性
-wenkit-box-sizing:border-box
清除点击高亮状态进行取消
-webkit-tap-heightlight-color：transparent；
在ios端加上这个属性后才可以给按钮和输入框定义样式
-webkit-appearance：none
img，a{
-webkit-touch-
}
移动端常见的布局方式：
1、移动端单独制作的时候，主流方案。
流式布局：
概念：就是百分比布局，非固定像素，通过对盒子的宽度进行百分比设置来达到根据屏幕宽度来进行相应伸缩目的，不受固定像素的限制。
flex弹性布局
布局原理：
传统布局和flex布局的对比：
传统的布局兼容性好，布局比较繁琐，有局限性，不能再移动端进行很好的布局。
flex操作方便，布局简单，移动端应用广泛。pc端有一定的兼容性问题，但是目前大部分pc端的浏览器也支持flex
ie11以下不支持flex
建议：如果是PC端页面布局最好采用传统方式。如果是移动端或者不考虑pc端兼容性的，都可以采用flex布局
flex的布局原理：
flex是弹性布局的意思。任何一个盒子都可以指定为flex，
当我们给父级盒子指定了flex布局后，子元素里面的float clear vertical-aligin。
采用flex布局的元素称为flex的容器（flex container） ，特德子元素自动称为容器成员，叫做flex项目（flex item），简称叫做项目
flex布局里面父项常见属性
flex-direction，设置主轴的方向‘
dispaly：flex：默认值row 沿着x轴排列从左到右排列 column 列 沿着y轴排列从上到下排列 row-reverse 从右到左排colunm-reverse 沿着y轴从下到上排列
xy一方为主轴，另一方就是侧轴
justify-content：属性值flex-start 从x轴左边开始从左到右 flex-end 依旧从左到右排列，但是换到x轴的右边 justify-content:center;
平分剩余空间 justify-content：space-around
两侧元素先靠边 其他元素平分剩余空间 justify-content：space-between
flex-wrap：设置子元素是否换行
默认子元素在一行，不进行换行。
属性值nowrap 不换行 让子项进行换行 flex-wrap：wrap换行
侧轴的元素排列方式align-items侧轴是单行元素是使用
aligin-items：属性值的默认值是flex-start侧轴子项从头开始
flex-end沿侧轴下面排列 align-items：center 居中 和justify-content：center
aligin-items:stretch 子元素如果没有给高度，会被拉伸到和父元素一样高
控制多行侧轴 align-content:设置多行侧轴上的子元素
align-content：flex-start 沿着顶部排列 flex-end 沿着尾部排列。
align-content:center居中排列 align-content：space-around子项沿着侧轴平分空
间align-content:space-between 首尾贴边 其他元素平分剩余空间
align-items和align-content的区别
1、align-items适用于单行 上对齐、下对齐、居中 、拉伸
2、align-content 适用于 上对齐 下对齐 居中 平分剩余空间 拉伸
单行找align-items
多行找align-
flex-flow复合属性：
flex-flow是flex-direction和flex-wrap的符合属性
flex布局的常见子项属性：
align-self：控制子项自己在侧轴上排列方式
默认值是auto默认继承父元素的align-items属性 若果自己有align-self属性 就用自己的 center 居中 flex-strat flex-end stretch
order来定义项目的排列顺序 数字越小 排位越靠前 默认是0 可以是负数
注意：不要和z-index排序
flex来控制子项占的份数
注意：
一个盒子可以同时是容器和项目。（套娃），
份数代表如果子项有自己的宽度，其他子项用flex：1平分剩余的部分。
less+rem+媒体查询
混合式布局
2、响应式布局
媒体查询
bootstrap
|
