rem布局与精灵图背景,且盒子宽高不等于缩小一半的精灵图宽高

最新推荐文章于 2023-11-02 17:46:45 发布

weixin_41684274

最新推荐文章于 2023-11-02 17:46:45 发布

阅读量767

点赞数

分类专栏： CSS 文章标签： rem布局精灵图盒宽高不匹配

本文链接：https://blog.youkuaiyun.com/weixin_41684274/article/details/82391088

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用精灵图进行图片资源管理的方法，并详细解释了如何通过CSS技巧将精灵图适配到移动端，包括如何计算精灵图的坐标、尺寸及背景大小，确保在不同分辨率设备上的显示效果。

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

.search-lab2{
   width: .14rem;
   height: .14rem;
   margin: .08rem .1rem 0 .1rem;

   // 首先说明:
   // 1.html的font-size是100px,所以1rem = 100px;
   // 2.精灵图原始尺寸是56px * 392px,需要适配移动端,所以会缩小到50%;
   //    缩小后的尺寸28px * 196px,对应 .28rem * 1.96rem, 以下都用rem单位;
   // 3.需要的放大镜原始x=12px, y=68px; 缩小后的x=6px , y= 34px;
   //    放大镜的原始宽度是33px * 33px
   // 4.放置放大镜的盒子的宽高是14px * 14px

// 难点:
// 原始宽高33px * 33px 缩到50%时,是16.5px * 16.5px,而盒子是14px * 14px不能完全适配

   // 解决方案引号引起来的是最终结果
   // 1.先算出一个比值,14px / 16.5px = (28/33)
   // 2.根据缩小后的精灵图计算 w = .28rem, h = 1.96rem;
   // 3.放大镜x = .06rem, y = .34rem, w = .165rem, h = .165rem
   //    放大镜的实际x, y, w, h都要乘以比值
   // 4.放大镜实际尺寸x = ".051rem" = .06rem * 比值, y = ".288rem" = .34rem * 比值
   // 5.bg-size设置的是精灵图的大小 w = ".238rem" = .28rem * 比值, h = "1.66rem" = 1.96rem * 比值
   // 设置背景: 剩下的如果略有偏差,就再细微调下数据;
   background: url(../images/home-icons.png) -.05rem -.285rem no-repeat;
   background-size: .238rem 1.66rem;
}