字数
640 字
阅读时间
3 分钟
这里整理下自己在 h5 开发中遇到的一些疑问和自己发掘的所以然
为什么在移动端开发时需要用到@3x, @2x 这种图片
设备像素比（dpr） = 物理像素 / 逻辑像素
3x 和 2x 指的是设备的像素密度，一个逻辑像素对应多少物理像素
对于图片来说，一个图片像素至少对应一个物理像素才能保证图片不失真，加入原始图片是 375 逻辑像素，那在二倍屏上至少要 750 物理像素才能不失真
也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真
通过 CSS媒体查询 来获取像素密度:
css
my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
#my-image { background: (high.png); }
}
/* stylus参考 */
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")设置小于 12px 的字体
在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px
- 使用 css3 的 transform 缩放属性 -webkit-transform:scale(0.5); 注意 -webkit-transform:scale(0.75); 收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用 display：block/inline-block/...；
- 使用图片：如果是内容固定不变情况下，使用将小于 12px 文字内容切出做图片，这样不影响兼容也不影响美观。
为什么有时候⽤ translate 来改变位置⽽不是定位
translate 是 transform 属性的⼀个值
- 改变 transform 或 opacity 不会触发浏览器的重新布局（reflow）和重绘 (repaint)，只会触发复合（compositions）
- transform 使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此 translate() 更⾼效，可以缩短平滑动画的绘制时间
- translate 改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况
css
animation statusIconMove 5s ease-in-out
animation-iteration-count infinit @keyframes statusIconMove
// 存在浮动卡顿的现象
// 0% {bottom: 81px;}
// 50% {bottom: 90px;}
// 100% {bottom: 81px;}
// 使用 transform 浮动更加平滑
0% {transform: translate(-50%, 0)}
50% {transform: translate(-50%, 9px)}
100% {transform: translate(-50%, 0)}贡献者
jiechen