一、了解移动基础
1.1 移动web开发基础
1.1.1 浏览器现状
-
-
兼容移动端主流浏览器，处理Webkit内核浏览器即可
1.1.2 手机屏幕现状
-
屏幕尺寸非常多，碎片化严重
-
前端开发不用关心分辨率，常用尺寸单位是px
1.1.3 常见移动端屏幕尺寸
-
一些单位: dp，dpi，pt，ppi
1.1.4 总结
-
移动端浏览器我们主要对webkit内核进行兼容
-
现在的移动端开发主要正对手机端进行开发
-
移动端碎片化比较严重, 分辨率和屏幕尺寸大小不一
-
学会用谷歌浏览器模拟手机页面进行调试(F12)
二、视口
-
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
2.1 布局视口
-
一般移动设备的浏览器都默认设置了一个布局视口,用于结局早期的PC端页面在手机上显示的问题。
-
IOS，Android基本都会将这个视口分辨率设为980px，所以PC上的网页大多都能在手机商城县，只不过元素看上去很小，需要通过手动缩放页面
-
仅仅视觉效果被压缩, 但是实际没有压缩
2.2 视觉视口
-
字面意思，它是用户正在看到的网站的区域
-
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口扔保持原来的宽度
2.3 理想视口
-
为了使网站在移动端有最理想的浏览器和阅读宽度而设定
-
手动添加<meta>标签使布局视口的宽度理想视口(布局视口)一致,简单理解就是设备有多宽, 布局的视口就有多宽
2.3.1 <meta>视口标签
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0>
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置是viewport宽度, 可以设置device-width特殊值 |
| initial-scale | 初始缩放比, 大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户视口可以缩放，yes或no（1或0） |
2.3.2 总结
-
视口就是浏览器显示页面内容的屏幕区域
-
视口分为布局视口，视觉视口和理想视口
-
移动端布局想要的是理想视口，就是手机有多宽，布局视口就有多宽
-
想要理想视口，需要添加meta属性
三、物理像素和物理像素比
-
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6/7/8 是 750*1334
-
而实际占满总宽只需要375个像素
-
-
我们开发的1px不一定是一个物理像素
-
PC端页面，1个px等于一个物理像素，移动端不一定相等
-
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
-
Retina(视网膜屏幕)是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而得到更高的分辨率, 并提高屏幕显示的细腻程度
四、二倍图
4.1 多倍图
-
对于一张50px*50px的图片在Retina屏打开，按照如iphone6/7/8那样的物理像素比会放大2倍，使照片模糊
-
在标准的viewport中，通常使用多倍图来解决在高清设备中的模糊问题
-
通常使用二倍图，甚至存在三、四倍图的情况
4.2 调整方法
-
假设图片都是100px的两倍图
（1）插入图片
{
50px;
height: 50px;
}
（2）背景图片
{
background-size: 50px 50px;
}
4.3 要图
（1）启动图
-
是设计师根据手机分辨率开发的
-
需要在这里也切图
（2）开发尺寸
-
是实际写进代码里面，进行切图量尺寸用的
（3）多倍图切图
-
@3X 3倍图
-
@2X 2倍图
-
@1X 1倍图原图
4.4 移动开发选择
（1）单独制作移动端页面（主流）
-
哦判断设备，跳转到移动端页面，域名有m.
（2）响应式页面兼容移动端
-
-
优点:
-
自适应, 公用一套网站
-
-
缺点:
-
制造麻烦, 需要花费精力去调兼容性问题
-
4.5 移动端常见问题的解决方法
-
回顾PC端的reset.css清除默认样式
-
但对于移动端使用normalize.css设置同意默认样式更好
（1）CSS初始化 normalize.css
-
移动端CSS初始化推荐使用normalize.css。是可以定制的css文件，它让不同浏览器在渲染网页元素的时候形式更统一，是一种现代的，为HTML5准备的优质替代方案
-
优点
-
保护有价值的默认值
-
修复了浏览器的bug，结局了浏览器的不一致的默认样式
-
模块化的, 提高了易用性
-
（2）CSS3 盒子模型 box-sizing
-
移动端推荐使用border-box
（3）特殊样式
/* CSS3盒子模型 */
/* box-sizing: border-box;
-webkit-box-sizing: border-box; */
/* 点击高亮我们需要清除, 设置为transparent */
* {
4.6 移动端技术选型
（1）单独制作移动端页面（主流）
-
流式布局（百分比布局）
-
flex弹性布局（强烈推荐）
-
less+rem+媒体查询布局
-
混合布局
（2）响应式页面兼容移动端
-
媒体查询
-