雪碧图+rem适配

最新推荐文章于 2022-09-19 10:30:01 发布

最新推荐文章于 2022-09-19 10:30:01 发布

阅读量1.1k

点赞数

分类专栏：个人项目经验工作笔记

本文链接：https://blog.csdn.net/lp15203883326/article/details/83783222

版权

本文介绍了雪碧图（CSS Sprites）的概念及其优势，详细阐述了如何使用雪碧图进行前端性能优化，包括理解大法、制作与使用步骤，并针对可能出现的问题提供了解决方案。同时提到了rem适配在页面布局中的应用。

摘要由CSDN通过智能技术生成

雪碧图就是将很多小图标放在一张图片上，就称为雪碧图（也叫做精灵图）

当一个前端页面上有许多固定位置的小图标时，每次访问这个页面。都需要从服务器上去发送请求获取图片资源，那么如果将这些图标都放在一个图里面，我们可以减少与服务器建立连接次数，提高页面加载速度。也是种前端性能的优化。

再讲解雪碧图的使用步骤之前，我们可以先了解下sprites图其实就是将一块大图（什么样的大图呢？就是多个小图合成在一起的大图）用来做背景图。

比喻一下使用雪碧图的整个过程（可能并不形象）
背景图就像是一块桌布(有着多种不规则图案的桌布)
使用方法是将其铺在桌子上，但是桌子上指定位置上具体展示的是哪块图案？
我们并不能预先知道。如果我们想要去控制某块区域展示这块桌布上的某个图案，我们可以拿一把剪刀，把图案剪下来，哪里需要贴哪里。

关注

专栏目录