了解移动端基础
浏览器
移动端的浏览器大多都是基于webkit修改的内核，国内尚无自主研发的内核。所以，兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：400 * 800，480 * 854，540 * 960，720 * 1290，1080 * 1920等。
近年来iPhone的碎片化也加剧了，640 * 960，640 * 1136，750 * 1334，1242 * 2208等。
移动端调试方法
- Chrome DevTools的模拟手机调试。
- 搭建本地web服务器，通过手机访问。
- 使用外网服务器，直接ip或域名访问。
视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
- 一般移动设备的浏览器都默认设置来一个布局视口，用于解决早期的PC端页面在手机上的显示问题。
- IOS，Android 基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。
视觉视口 visual viewport
- 字面意思，它是用户正在看到的网站的区域。 注意：是网站的区域。
- 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要填写meta视口标签通知浏览器操作
- meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解- 就是设备有多宽，我们布局的视口就多宽。
<meta>视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。
- 我们开发时候的1px不是一定等于1个物理像素的。
- PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同。
-
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
物理像素比.png
多倍图
- 对于一张50 * 50 的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
- 通常使用二倍图，因为iPhone 6/7/8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。
- 背景图片注意缩放问题。
移动端开发选择
- 单独制作移动端页面(主流)
- 响应式页面兼容移动端(其次)
移动端常见问题解决方案
移动端浏览器主要以webkit为主，因此我们只需要考虑webkit兼容性问题。
我们可以放心使用H5和CSS样式。
同时我们浏览器的私有前缀我们只需要考虑添加-webkit-即可。
移动端CSS初始化推荐使用normalize.css
官网：https://necolas.github.io/normalize.css/
移动端技术选型
单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex弹性布局（强烈推荐）
- less + rem +媒体查询布局
- 混合布局
响应式页面兼容移动端（其次）
- 媒体选择
- bootstrap
流式布局（百分比布局）
- 流式布局，就是百分比布局，也称非固定像素布局
- 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- 流式布局方式是移动web开发使用的比较常见的布局方式
注意
制作过程中，需要定义页面的最大和最小支持宽度
- max-width最大宽度 （max-height最大高度）
- min-width最小宽度（min-height最小高度）
flex布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11或更低版本，不支持或仅部分支持
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
- flex-direction: 设置主轴方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素的排列方式（多行）
- align-items: 设置侧轴上的子元素排列方式（单行）
- flex-flow: 复合属性，相当于同时设置了 flex-direction 和flex-wrap
rem
- rem -- root em是一个相对单位，类似于em，em是父元素字体大小。
- 不同的是rem的基准是相对于html标签元素的字体大小
- 比如，根元素html设置font-size=12px；非根元素设置width：2rem；转化成px就是24px
- rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。
媒体查询
- 用@media开头 注意@符号
- mediatype媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature){
css-code;
}
max-width min-width都包含等于
less
css弊端
- css需要书写大量看似没有逻辑的代码，css冗余度是比较高的
- 不方便维护及扩展，不利于复用
- css没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
less简介和安装
- Less Leaner Style Sheets 是一门 CSS扩展语言，也成为CSS预处理器。
- 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
- 它在CSS的语法基础上，引入来变量，Mixin（混入），运算以及函数等功能，大大简化来CSS的编写，并且降低了CSS的维护成本，就像它的名称
Less是一门CSS预处理语言，它扩展了CSS的动态特性。
安装
npm install -g less
Less变量规则
- 必须以@开头
- 不能包含特殊符号
- 数字不能开头
- 大小写敏感
Less运算
- 参与运算的数字，可以一个有单位一个没有，最终单位就是唯一那个单位
- 参与运算的两个数字，两个都有单位取第一个的
- less的运算符左右必须加空格
Less实际开发适配方案1：rem+媒体查询+less技术
响应式页面兼容移动端
- 媒体查询
- Bootstrap
Bootstrap
优点
- 标准化html + css 编码规范
- 提供了一套简洁、直观的组建
- 有生态圈，不断更新迭代
- 让开发更简单，提高效率
