vue学习第18天 css --- 移动web开发 （单独/响应式、常见布局【单独：流式、flex、rem适配、混合 / 响应式：媒体查询、bootstarp框架】）
学习目标：
目录：
移动端基础
1、浏览器现状
2、手机屏幕现状
3、常见移动端屏幕尺寸
查看地址： https://www.strerr.com/screen.html
注：作为前端开发，不用纠结dp，dpi, pt, ppi等单位。
4、移动端调试方法
5、总结
视口
视口：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口
1、布局视口 （layout viewport） 看到所有内容，内容小
2、视觉视口（visual viewport）正常大小，内容显示部分
3、理想视口（ideal viewport） 最理想的视口
4、总结
5、meta视口标签
6、标准的viewport设置
二倍图
1、物理像素&物理像素比（ 物理像素（分辨率）和px不是一一对应，会存在物理像素比（dpr） ）
2、多倍图
拥有的是50*50像素图片，因为像素比 被拉伸成了100*100像素，图片就模糊了
3、背景缩放 background-size
1）背景图片设置
2）缩放
根据像素比，设置对应的图片大小防止图片模糊
4、多倍图切图Cutterman
移动端开发选择
1、移动端主流方案（单独 与 响应式）
2、单独移动页面（主流）案例：商城手机版
通常情况下，网址域名前面加 m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
单独给手机版一个样式
3、 响应式兼容PC移动端 案例： 阿里百秀
三星电子官网：www.samsung.com/cn/，通过判断屏幕亮度来改变样式，以适应不同终端。
通过媒体查询修改样式
缺点： 制作麻烦，需要花精力调兼容性问题
4、总结
移动端技术解决方案
1、移动端浏览器
2、CSS初始化normalize.css
移动端CSS 初始化推荐使用 normalize.css/
1）Normalize.css：保护了有价值的默认值
2）Normalize.css ：修复了浏览器的bug
3）Normalize.css：是模块化的
4）Normalize.css：拥有详细的文档
官网地址：http://necolas.github.io/normalize.css/
3、CSS3盒子模型 box-sizing*** 可以作为初始化文件里的必要属性
1）传统模式宽度计算（box-sizing : content-box;）：盒子的宽度 = CSS中设置的 width + border + padding
2）CSS3盒子模型 （box-sizing : border-box;）： 盒子的宽度 = CSS中设置的宽度width 里面包含了（ border 和 padding）
总结：
移动端可以全部CSS3 盒子模型。
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性 ，我们就选择 CS53 盒子模型
4、特殊样式***重点**
1）盒子模型 box-sizing: border-box;
2）点击高亮清除高亮 -webkit-top-highlight-color: transparent;
3）ios按钮输入框添加自定义样式 -webkit-appearance:none;
4）禁用长按页面时的弹出菜单 img,a{ -webkit-touch-callout: none; }
移动端的常见布局
移动端技术选型
移动端布局和PC端有所区别
1、流式布局（百分比布局）
1）流式布局，就是百分比布局，也称非固定像素布局。
2）通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
3）流式布局方式是移动web开发使用的比较常见的布局方式。
4）max-width / max-height 最大宽度/高度
5）min-width / min-height 最小宽度/高度
