css 2倍图 3倍图使用方法

最新推荐文章于 2023-04-24 22:00:41 发布

转载最新推荐文章于 2023-04-24 22:00:41 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/bonly-ge/p/10727892.html

文章标签：

#css #html5 #css3

本文详细介绍如何使用CSS的DevicePixelRatio媒体查询属性和srcset属性实现不同分辨率图像的自动切换，包括@2x和@3x图像在移动端项目的应用。通过具体的SCSS和CSS代码示例，展示如何根据不同设备像素比加载对应的高清图片，提升用户体验。

部署运行你感兴趣的模型镜像

css二倍图的使用
使用 CSS 的 DevicePixelRatio 媒查询属性
参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像
移动端项目中 @2x 图和 @3x 图的使用（需要支持css3）

/默认大小/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于2，则用2倍图 /
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min–moz-device-pixel-ratio: 2) {
.photo {
background-image: url(image200.png);
background-size: 100px 100px;
}
}
/ 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min–moz-device-pixel-ratio: 3) {
.photo {
background-image: url(image300.png);
background-size: 100px 100px;
}
}
.photo {width:100px;height:100px;}
scss写法

@mixin bg-image( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsund-image: url($ url + “@2x.png”);
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
background-image: url($url + “@3x.png”)
}
}
css样式中调用 bg-image 方法

div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image(‘special_1’);
}
方法二:直接使用 IMG 的 SRCSET 属性

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率