[JavaScript知识库]前端学习笔记：meta视口标签及二倍精灵图用法

一、meta视口标签

    <title>meta视口标签</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scalable=no">

width=device-width,视图宽度和设备保持一致
initial-scale=1.0, 视口的默认缩放比例1.0
maximun-scale=1.0, 最大允许的缩放比例1.0
minimun-scale=1.0, 最小允许的缩放比例1.0
user-scalable=no,不允许用户自行缩放

二、二倍精灵图做法

1.精灵图尺寸为 400*400
2.在PS中正常打开精灵图，选择切片工具切出你需要的图片，在切片处右键打开 编辑切片选项

    /* 1. X 和 Y 坐标变为原来的一半 -82px 0 */
background: url(../images/sprites.png) no-repeat -82px 0;
    /* 2. 要把精灵图缩小为原来的一半 */
background-size: 200px auto;