在rem单位下使用雪碧图实现自适应
2019-09-30 本文已影响0人
MC桥默
什么是雪碧图
雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
在rem单位下，雪碧图的处理
为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。
比如我们的元素为5050px，sprite图片为200px 50px，那css应该如下：
#cpt{
width: 0.5rem;
height: 0.5rem;
background-image: url(cpt.png);
background-size: 2rem 0.5rem;
}
rem单位下使用雪碧图的demo]
需要引用的雪碧图如下
css_sprites.png
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="windowSize.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 2rem;
height: 2rem;
float: left;
border: 1px solid blue;
background-size: 8.8rem 6.6rem !important;
}
div:first-child{
background: url('css_sprites.png') -.1rem -.1rem;
}
div:nth-child(2){
background: url('css_sprites.png') -2.30rem -.10rem;
}
div:nth-child(3){
background: url('css_sprites.png') -.10rem -2.30rem;
}
div:nth-child(4){
background: url('css_sprites.png') -2.30rem -2.30rem;
}
div:nth-child(5){
background: url('css_sprites.png') -4.50rem -.10rem;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br style="clear: both">
</body>
</html>
