前端移动端基础

1 移动端基础

1.1 meta视口标签

<meta name="viewport" content="width=device-width,user-scalable=no,
    initial-scale=1.0,maximum-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）

1.2 特殊样式

2 二倍图

2.1 物理像素&物理像素比

1. PC端和早前的收集屏幕/普通手机屏幕：1CSS像素=1物理像素的
2. Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

2.2 多倍图

1. 对于一张50px * 50px的图片，在收集Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
2. 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
3. 注意图片缩放问题。

2.2.1 背景缩放

语法：

background-size:背景图片宽度 背景图片高度

若只有一个参数就是指宽度

1. 单位：长度 | 百分比 | cover | contain
2. cover把背景图像扩展至足够大，以使背景图片完全覆盖背景区域
3. contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

2.3 二倍精灵图做法

 拿一张精灵图片

1. 在firework（PS）里面把精灵图等比例缩放为原来的一半。
2. 之后根据大小测量坐标。
3. 注意代码里面的background-size也要写：精灵图原来宽度的一半。

/*原图宽度大小为208px  精灵图标大小23×23*/
/*位置-59px -194px*/
/*将图片缩小为原来宽度的一半*/
.user::before{
    content: '';
    display: block;
    width: 23px;
    height: 23px;
    background: url("../images/sprite.png") no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 3px auto 0;
}