移动设备上“精灵图”的制作&适配

最新推荐文章于 2024-07-12 16:46:59 发布

Chenming_321

最新推荐文章于 2024-07-12 16:46:59 发布

阅读量568

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Chenming_321/article/details/94753077

js 专栏收录该内容

18 篇文章

订阅专栏

本文分享了使用CSS精灵图进行响应式设计的技巧，包括如何计算background-size和background-position属性，以确保不同屏幕尺寸下图片的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不废话了，直接贴代码

#introduceHonor3  .collaborate .collaborateList ul .collaborateImg{
    background-image:url(../img/exploreSuddenfix/consociationList.png)!important;
    background-size: 23.84rem auto;
    float:left;
    width:1.62rem;
    height:1.1rem;
}
#introduceHonor3  .collaborate .collaborateList ul  i{
    margin:0.4rem 0;
    display:inline-block;
    float:left;
    width:0.02rem;
    height:0.3rem;
    background:rgba(209,246,243,1);
}
#introduceHonor3  .collaborate .collaborateList ul .chinaUnicom{
    background-position:-8.08rem  0 ;
}

2个重点：
1: background-size: 23.84rem auto;
23.84rem = 1192/50;
1192是我的精灵图的width；
我的适配是50;所以、50；一般都是100；根据自己的适配大小；