一、移动端基础

1.浏览器现状

兼容移动端主流浏览器，处理Webkit内核浏览器即可

2.移动端调试方法

image.png

二、视口

视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

1.布局视口

image.png

2.视觉视口

image.png

3.理想视口

image.png

4.视口标签

image.png

5.标准viewport设置

image.png

三、二倍图

1.物理像素和物理像素比

image.png

2.多倍图

image.png

3.背景缩放background-size

image.png

四、移动端技术解决方案

1.css初始化

image.png

2.CSS3盒子模型

image.png

3.特殊样式

image.png

五、移动端常见布局

image.png

1.流式布局（百分比布局）

image.png
image.png

2.flex布局

image.png
image.png
image.png

常见父项属性

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

子项常见属性

image.png
image.png
image.png
image.png

3.rem适配布局

3.1rem基础

image.png

3.2媒体查询

image.png
image.png
image.png
image.png
image.png
image.png

4.less

image.png

less变量

image.png
image.png
image.png