CSS两倍图代码是指在设计师提供的图像素尺寸基础上,程序员将其缩小一半,以适应高清设备的物理像素。这里介绍两种解决方案。/* 方案一 */ /* 设计师提供的持锐度图 */ .logo { width
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图片,即可在高清与非高清设备间自动适配。但是文件大小增大,可能会对页面加载速度产生影响。
综上所述,选择哪种方案取决于具体需求。在实际项目中,可以结合实际情况,综合考虑使用哪种方案。
粉丝
0
关注
0
收藏
0