[分享]css两倍图代码

CSS两倍图代码是指在设计师提供的图像素尺寸基础上，程序员将其缩小一半，以适应高清设备的物理像素。这里介绍两种解决方案。/ 方案一 / / 设计师提供的持锐度图 / .logo { width: 10...

CSS两倍图代码是指在设计师提供的图像素尺寸基础上，程序员将其缩小一半，以适应高清设备的物理像素。这里介绍两种解决方案。

/* 方案一 */

/* 设计师提供的持锐度图 */
.logo {
  width: 100px;
  height: 50px;
  background-image: url('logo.png');
}

/* 图片缩小一倍，适应设备物理像素 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-size: 50%;
  }
}

/* 方案二 */

/* 设计师提供的大图 */
.logo {
  width: 100px;
  height: 50px;
  background-image: url('logo@2x.png');
  background-size: 100px 50px;
}

/* 针对非高清设备 */
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 96dpi) {
  .logo {
    background-image: url('logo.png');
    background-size: 100px 50px;
  }
} 

方案一的优点在于，可以减小文件大小，提高页面加载速度。但是设备像素比例发生改变时，必须重新编写媒体查询。

方案二比较简单，只需多提供一份@2x图片，即可在高清与非高清设备间自动适配。但是文件大小增大，可能会对页面加载速度产生影响。

综上所述，选择哪种方案取决于具体需求。在实际项目中，可以结合实际情况，综合考虑使用哪种方案。