一、视口
概念
视口：浏览器显示页面内容的屏幕区域。分成3种：布局视口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）
meta视口标签实现理想视口
二、二倍图
物理像素&物理像素比 移动端的物理像素与px并不是一一对应的关系，存在一个像素比，每款手机的像素比不一样。视网膜屏幕技术把更多的像素点压缩至一个屏幕里，从而提高分辨率 移动端查看图片模糊的问题 移动端会导致图片变得模糊。当用到图片时，使用原图的两倍甚至更多倍，然后再用css技术把图片控制在想要的大小内，这样在移动端可以显示更清晰的图片。 背景缩放 background-size三、CSS3盒子模型
PC端对css3有兼容性问题,移动端没有,统一使用css3四、特殊样式
五、移动端常用布局
常用布局
流式布局 ( 百分比布局 ) max-width 设置最大宽度min-width 设置最小宽度,当超过设置的宽度,则不会再伸缩 flex布局less+rem+媒体查询布局混合布局
移动端技术选型
六、flex布局
flex原理
flex也叫伸缩布局 弹性布局等,用来为盒子提供最大的灵活性,任何容器都可以使用flex布局当我们为父盒子设置flex布局以后,子元素的float clear 和 vertical-align属性将失效采用flex布局的元素称为flex元素,子元素称为项目原理 : 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
常见父项属性
(1)flex-direction设置主轴的方向
主轴和侧轴
主轴 : x轴 , 水平向右侧轴: y轴 , 垂直向下
属性值
(2)justify-content设置主轴上的子元素排列方式
(3)flex-wrap设置子元素是否换行
默认是不换行的,如果显示不下,会自动修改子元素的宽度属性值
(4)align-items设置侧轴上子元素的排列方式 ( 子元素只有一行时才有效果 )
属性值
(5)align-content设置侧轴上子元素的排列方式 ( 子元素有多行时才有效果 )
属性值
(6)
(7)flex-row是 flex-diraction和flex-wrap属性的复合属性
常见子属性
（1）flex：分配子项目的剩余空间
（2）align-self：控制子项自己在侧轴上的排列方式
（3）order：定义项目的前后顺序，默认是0，如果设置为-1则会往前移动。
七、rem适配布局
rem基础（1）rem单位：是一个相对单位，跟em类似，em是父元素的字体大小。rem是相对于html的字体大小。
例如，em = 12px ，则10em = 120px 。
（2）rem优势：可以通过html标签里面设置的字体大小来控制整个页面的大小。媒体查询
（1）语法规范：@media mediatype and|not|only (media feature){
css code;
}
（2）示例：@media screen and (max-width:800px){}
（3）引入资源：当样式比较多时，可以针对不同的媒体使用不同的css文件。原理就是在link中判断设备的尺寸，然后引用不同的css文件。示例:
<link rel = "stylesheet" href = "style320.css" media="screen and (min-width:320px)">
less基础
（1）Less介绍：Less是css的扩展语言，也称为css预处理语言。他在css基础引入了变量、运算以及函数等功能。
（2）Less安装：cnpm install -g less
（3）查看Less版本：lessc -v
（4）Less使用： 1. 变量：@变量名：属性值。示例：@color:pink; 定义好之后，后面的属性都可以使用这个变量。
（5）Less编译：VScode安装插件：easy less，安装这个插件之后，只要在less文件中保存就可以生成css文件。
（6）Less嵌套：在css的花括号里面可以继续添加花括号来定义子元素的样式。如果要嵌套伪类，则可以在伪类的选择器前面加一个&符号，否则会默认定义成父选择器的儿子。
（7）Less运算：可以对数字进行四则运算。运算符前后要空格。如果运算符左右两个参数只有一遍有单位，则以那个单位为准；如果两边都有参数，则以第一个单位为准。rem适配方案
