今日所学内容：
Web移动端流式布局和flex布局
浏览器的现状
PC端常用浏览器：
360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器等等
移动端常用浏览器：
UC浏览器、QQ浏览器、百度手机浏览器、谷歌浏览器等等
总结：
国内浏览器一般都是根据Webkit修改过来的内核，所以如果要照顾兼容性，只处理Weblit内核的浏览器
手机屏幕现状
安卓设备的分辨率：
480x800、480x584、720x1280、1080x1920等等，还有2k和4k等等
iPhone设备的分辨率：
640x960、640x1336、750x1334、1242x2208等等
作为开发者、我们不需要重点关注这些分辨率，因为我们常用的单位px
移动端调试的方法
Chrome DevTools 谷歌模拟手机调试（常用）
直接搭建本地web服务器，手机访问即可
直接用外网服务器，用IP来进行访问
视口
什么是视口？
视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口
布局视口（Layout viewport）
一般移动端的浏览器都是默认设置了一个布局视口，用于解决早些的PC端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以pc端页面大多数都能在手机上呈现，，但是元素看上去非常小，可以手动缩放
视觉视口：
用户正在看到的网站的区域，操作视觉视口时，不会影响布局视口
理想视口
为了使网站在移动端有最理想的浏览器和阅读器宽度而设定的
理想视口是设备最理想的视口尺寸
需要使用meta视口标签来通知浏览器进行操作
理想视口就是将布局视口的宽度修改
meta标签
meta标签的属性说明
物理像素和物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理上真实存在的，在设备出场时就设置好的，比如：iPhone6：750x1334
我们开发的时候用的单位1px,但是1px不一定等于一个物理像素
一个px能显示的物理像素点的个数，就叫做物理像素比。
如果把一张100x100的图片放到手机里面会按照物理像素比进行缩放
物理像素比的计算方式
用设备的物理像素分辨率/开发的尺寸即可
比如iPhone6的屏幕时750x1334开发的尺寸为375x667所以物理像素比就是2
多倍图
对一张50px*50px的图片，在手机上打开，按照2倍的物理像素比，会将图片进行放大从而变模糊
处理方式：
1.将一个在pc端是100px*00px的图片先缩小为50px*50px
2.将图片在移动号端进行导入即可。
背景缩放
属性：background-size:背景图片的宽度 背景图片的高度；
单位：长度/百分比/cover/contain
移动端开发选择方案
移动端的主流方案
1.单独制作移动端页面（主流）
通常情况下，网址前会加m(mobile)https://m.jd.com
打开设备时自动进行判断，如果是PC端就显示pc端的网站，如果是移动设备，就跳转到移动端网站
pc端和移动端是两套页面
2.响应式网站
pc端和移动端公用一套网站，在不同屏幕下进行适配
移动端的技术解决方案
1.移动端的浏览器兼容性问题
国内的浏览器基本上是以Webkit内核为主，因此只考虑weblit的兼容性即可
我们可以放心使用html5和css3
2.移动端的公共样式
推荐使用normalize.css
优点：
保护了有价值的默认值
修复了一部分浏览器bug
模块化的
具有详细的文档
可以大量使用css3的盒子模型
如果PC端需要多浏览器完全兼容，就用传统模式，如果不考虑兼容性问题，或者在移动端使用，就可以直接是css3的盒子模型，也即是box-sizing：border-box；
移动端常见的布局
1.移动端单独制作（主流）
流式布局
flex弹性布局
less+rem+媒体查询
混合布局
2.响应式布局（次要）
1.媒体查询
2.Bootstrap
流式布局
概念：
流式布局就是百分比布局，也叫做非固定像素布局
通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应式拉伸的目的，不受像素值限制
flex布局
传统布局和flex布局的对比
传统布局：兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
Flex布局：操作简单，移动端应用广泛
PC端有一定的兼容性问题，但是目前大部分PC端浏览器也是支持flex布局的
IE11以下不支持flex
建议：如果PC端页面布局，最好采用传统布局方式
如果是移动端或者不考虑PC端兼容性的，都可以采用flex布局
原理：
flex意思时弹性布局，任何一个盒子都可以指定为flex
当我们给父级元素制定了flex布局后，里面的子元素的float、clear和vertical-align属性都将失失效
采用flex布局的元素称为Flex容器，他的所有子元素自动成为容器成员，叫做项目
Flex布局的父项常见属性
flex-direction:设置主轴的方向
在flex 布局中分为x轴，y轴，默认的主轴是x轴，也就是水平向右，也可以将主轴设置为y轴，也就是垂直向下
属性值：
row:沿x轴从左向右进行排列（默认值）
row-reverse：沿x轴从右到左进行排列
column：沿y轴从上向下进行排列（默认值）
column-reverse：沿y轴从下到上进行排列
justify-content
/* 默认值，就是沿着x轴，也就是从左到右开始时 */
justify-content:flex-start;
/* 从尾部开始进行排列 */
/* 注意：要和row-reverse区分开 */
justify-content: flex-end;
/* 沿主轴水品居中对齐 */
justify-content: center;
/* 沿主轴平分剩余空间 */
justify-content: space-around;
/* 先让两侧盒子贴边在让中间盒子平分剩余空间 */
justify-content: space-between;
flex-wrap:设置子元素是否换行
默认情况
align-items：设置侧轴尚的子元素的排列方式（单行）
/* 注意：子项是单项（单行）的时候用该属性控制 */
align-items: flex-start;
/* 侧轴从尾部开始排列 */
align-items: flex-end;
/* 侧轴居中显示 */
align-items: center;
/* 主轴居中 */
/* justify-content: center; */
/* 子项不给高度，使用拉伸，可以将子项拉伸到和父项一样高 */
align-items: stretch;
align-content
/* 默认值从侧轴的头部开始排列 */
align-content: flex-start;
/* 沿尾部进行排列 */
align-content: flex-end;
/* 子项沿侧轴平分剩余空间 */
align-content: space-around;
/* 子项在侧轴先两侧贴边,然后再平分剩余空间 */
align-content: space-between;
align-items和align-content的区别：
align-items适用于单行情况下，只有上对齐
|
