移动端开发学习要点

一、移动端基础知识

关注点：

1. 移动端与PC端的不同
2. 手机设备像素对开发的影响
3. CSS各种度量单位
4. 移动端浏览器分布情况

1.1 移动端与PC端的不同

有一次提起重要的查询网站 caniuse.com，可以到上面去查看是否兼容

1. w3c标准支持情况
2. 交互上因为屏幕的变化而产生的不同
3. 布局的不同，移动端多用flex布局，用rem计算，1rem = 10px
4. 性能考虑不一样。流量问题，图片适配和压缩问题

1.2 手机设备的概念

1. physical pixel 物理像素值，屏幕像素比
2. 设备独立像素，设备无关的，例如浏览器宽度
3. 设备像素比window.devicePixelRatio
4. PPI每英寸的像素值，大于300时就是高清
   当前浏览器宽度*设备像素比=屏幕像素比

1.3 viewport

指设备的屏幕上能用来显示网页的区域，一般来讲，viewport都要大于浏览器的可视区域

属性	说明
width:正整数或“device-width”	设置宽度
initial-scale:一个可以带小数的数字	设置页面的初始缩放值
minimum-scale:一个可以带小数的数字	设置页面的最小缩放值
maximum-scale:一个可以带小数的数字	设置页面的最大缩放值
user-scalable:yes/no	是否允许用户缩放

1.4 css度量单位

1. px
2. rem，相对于根节点的字体大小缩放倍数
3. em，父元素的字体大小缩放倍数
4. vh.vw，浏览器可视区域的百分比
5. vmin.vmax

二、flex弹性布局

高效方便的控制元素对齐、排列，最重要的是能自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的

display：-webkit-flex

1. 伸缩容器属性

属性	说明	值
flex-direction	子元素在主轴的排列方向	row(默认值)：从左到右；row-reverse：从右到左；column:从上到下；column-reverse：从下到上；
flex-wrap	换行	nowrap(默认值)：不换行；wrap：换行；wrap-reverse：换行到上面
*flex-flow	排列和换行	flex-direction和 flex-wrap的组合
justify-content	主元素的对齐模式	flex-start（默认值，主轴的起点）;center;flex-start（主轴的终点）;space-around（平分主轴）；space-between（紧靠两端，剩余中间平均分）
align-content	控制容器内多行在交叉轴上的排列方式	flex-start（默认值，交叉轴的起点）;center;flex-start（交叉轴的终点）;space-around（平分交叉轴）；space-between（紧靠两端，剩余中间平均分），必须在换行的情况下才能使用
align-items	子元素在交叉轴上的排列方式	flex-start（交叉轴的起点）;center;flex-start（交叉轴的终点）;baseline（以基线对齐），stretch(默认值，拉伸对齐)

2. 子元素属性

属性	说明	值
order	子元素在父容器的顺序	0(默认值)；任何整数；负值；
flex-grow	剩余空间分配，谁的数大谁占得多	0(默认值)；数字(不能为负)
flex-shrink	空间不足的分配	0(默认值)；数字(不能为负)
flex-basis	计算前刨去的空间	auto(默认)、宽度、0
align-self	子元素的在交叉轴上的对齐方式	flex-start（交叉轴的起点）;center;flex-start（交叉轴的终点）;baseline（以基线对齐），stretch(默认值，拉伸对齐)

3. flex常见的是card布局

三、响应式（媒体查询@media）

@media screen and/only/not (max-width: 370px){
css-style
}