一、今日学习
浏览器现状
手机屏幕现状
移动端调试的方法
Chorme DevTools 谷歌模拟手机调试（常用）
直接搭建本地web服务器，手机访问即可
直接用外网服务器，用ip来进行访问
布局视口（Layout viewport）
视觉视口（Visual viewport）：用户正在看到的网站的区域，操作视觉视口时，不会影响布局视口。
理想视口（Ideal viewport）：理想视口就是将布局视口的宽度修改为视觉视口的宽度
meta标签的属性说明
物理像素和物理像素比
多倍图
背景缩放属性：background-size：背景图片的宽度 背景图片的高度；
单位：长度/百分比/cover/contain
移动端开发选择及技术方案
移动端的技术解决方案移动端的浏览器兼容性问题
移动端的公共样式：可以大量使用css3的盒子模型、移动端的特殊样式
移动端常见的布局
移动端单独制作（主流）
流式布局
flex弹性布局
less+rem+媒体查询
混合布局
响应式布局（次要）
媒体查询
Bootstrap
流式布局
概念：流式布局就是百分比布局，也叫做非固定像素布局
通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应伸缩的目的，不受固定像素的限制
传统布局和flex布局的对比
传统布局：
兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
Flex布局
操作方便，布局简单，移动端应用广泛
PC端有一定的兼容问题，但是目前大部分PC端浏览器也是支持flex布局的
IE11以下不支持flex
建议：如果是PC端页面布局，最好是采用传统方式，如果是移动端或者不考虑PC端兼容性的，都可以采用flex进行布局
Flex布局原理
Flex布局父项常见属性
Flex布局子项常见属性
|
