移动端Rem布局--雪碧图css sprite

╰半橙微兮° 2023-06-17 13:53 38阅读 0赞

# 为什么使用雪碧图 #

**\[摘要\]**

CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，今天为大家分享一个一键生成css雪碧图片的工具，复杂的事情简单化，提高开发效率。

CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染时，可以减少请求次数，在一定程度上能够加快网页加载速度。

这并不是什么新鲜玩意了，但由于将小图整合到一张大图，又要准确的写出所需小图的background-position值，对于很多新手来说比较浪费时间，很多人只能放弃这个比较繁琐的步骤。

今天为大家分享一个一键生成css雪碧图片的工具，复杂的事情简单化，提高开发效率。

# **软件下载地址** #

***      [点我下载][Link 1]***  提取密码  ***hu90***

## 雪碧图-优缺点 ##

### CSS Sprites 的优点： ###

*  减少图片的字节
 *  减少了网页的http请求，从而大大的提高了页面的性能
 *  减少命名难的问题

### CSS Sprites 的缺点： ###

*  在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
 *  在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
 *  CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

**提示：  
         background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。**

# **pc端 使用案例** #

## **下载css sprite工具并使用工具合同雪碧图** ##

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]**

## 导出cssSprite.css ##

.img {
    	background: url(../imgs/img.png) no-repeat;
    	display: inline-block;
    }
    
    .auth {
    	height: 49px;
    	width: 41px;
    	background-position: 0 0;
    }
    
    .system {
    	height: 48px;
    	width: 48px;
    	background-position: -41px 0;
    }
    
    .other {
    	height: 49px;
    	width: 48px;
    	background-position: -89px 0;
    }
    
    .money {
    	height: 48px;
    	width: 54px;
    	background-position: -137px 0;
    }
    
    .warn {
    	height: 50px;
    	width: 55px;
    	background-position: -191px 0;
    }

## 页面使用 ##

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/cssSprite.css" />
    		<style type="text/css">
    			html,
    			body {
    				height: 100%;
    				width: 100%;
    				padding: 0;
    				margin: 0;
    				border: 0;
    			}
    			
    			.cssSpriteDiv {
    				height: 500px;
    				width: 400px;
    				margin: 0 auto;
    				border: 1px solid #DCDCDC;
    				;
    			}
    			
    			ul {
    				padding: 0;
    				margin: 0;
    			}
    			
    			li {
    				list-style: none;
    				height: 60px;
    				line-height: 60px;
    				border-bottom: 1px solid #DCDCDC;
    				vertical-align: middle;
    				display: flex;
    				align-items: center;
    				padding-left: 40px;
    			}
    			
    			.imgV {
    				width: 60px;
    				height: 60px;
    				display: flex;
    				align-items: center;
    				justify-content: center;
    				margin-right: 20px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="cssSpriteDiv">
    			<ul>
    				<li>
    					<div class="imgV"><span class="img auth"></span></div>授权通知
    				</li>
    				<li>
    					<div class="imgV"><span class="img warn"></span></div>平台警告
    				</li>
    				<li>
    					<div class="imgV"><span class="img system"></span></div>系统公告
    				</li>
    				<li>
    					<div class="imgV"><span class="img money"></span></div>付款通知
    				</li>
    				<li>
    					<div class="imgV"><span class="img other"></span></div>其他信息
    				</li>
    			</ul>
    		</div>
    	</body>
    
    </html>

## 运行后效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

# 移动端 如何适配雪碧图 #

当然是用rem！！！

注意雪碧图当作背景图的时候要设置background-size:也是rem，比如：background-size:7.5rem 3rem;

其他的取值自然也是rem，不要用PX，否则不同手机屏幕，从雪碧图里面截取的icon不会自适应！！！

## cssSpriteRem ##

.img {
    	background: url(../imgs/img.png) no-repeat;
    	background-size:2.46rem .5rem
    }
    
    .auth {
    	height: .49rem;
    	width: .41rem;
    	background-position: 0 0;
    }
    
    .system {
    	height: .48rem;
    	width: .48rem;
    	background-position: -.41rem 0;
    }
    
    .other {
    	height: .49rem;
    	width: .48rem;
    	background-position: -.89rem 0;
    }
    
    .money {
    	height: .48rem;
    	width: .54rem;
    	background-position: -1.37rem 0;
    }
    
    .warn {
    	height: .5rem;
    	width: .55rem;
    	background-position: -1.91rem 0;
    }

## cssSpriteRem.html ##

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>移动端rem结合cssSprite</title>
    		<link rel="stylesheet" type="text/css" href="css/cssSpriteRem.css" />
    		<style type="text/css">
    			html,
    			body {
    				padding: 0;
    				margin: 0;
    				height: 100%;
    				width: 100%;
    				border: none;
    			}
    			
    			p {
    				margin: 0;
    			}
    			
    			.msgContainer {
    				width: 100%;
    				height: 100%;
    				overflow-x: hidden;
    				overflow-y: auto;
    			}
    			
    			.ico {
    				display: inline-block;
    			}
    			
    			.divItem {
    				border-top: 0.2rem solid #F5F5F5;
    				min-height: 2.93rem;
    				font-size: 0.3REM;
    				font-family: Microsoft YaHei;
    				font-weight: 400;
    				color: rgba(51, 51, 51, 1);
    				display: flex;
    				flex-direction: column;
    				background: #fff;
    				padding: 0 .2rem;
    			}
    			
    			.head {
    				height: 1rem;
    				border-bottom: 0.01rem solid #F5F5F5;
    				display: flex;
    				flex-direction: row;
    				justify-content: space-between;
    				align-items: center;
    			}
    			
    			.headLeft {
    				display: flex;
    				flex-direction: row;
    				align-items: center;
    			}
    			
    			.msgbody {
    				display: flex;
    				flex-direction: column;
    				padding: .32rem 0;
    			}
    			
    			.msgTitle {
    				font-size: .3rem;
    				margin-bottom: .29rem;
    				font-family: Microsoft YaHei;
    				font-weight: bold;
    				color: rgba(51, 51, 51, 1);
    			}
    			
    			.pubTime {
    				font-size: .24rem;
    				font-family: Microsoft YaHei;
    				font-weight: 400;
    				color: rgba(128, 128, 128, 1);
    			}
    			
    			.msgContent {
    				font-size: .26rem;
    				font-family: Microsoft YaHei;
    				font-weight: 400;
    				color: rgba(128, 128, 128, 1);
    				line-height: .36rem;
    			}
    			
    			.headLeft div {
    				margin-right: .2rem;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="msgContainer"></div>
    
    		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			onResizeChg();
    
    			function onResizeChg() {
    				console.log(document.documentElement.clientWidth)
    				document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    			};
    
    			$(function() {
    				showRecord();
    			})
    
    			function showRecord() {
    				var imgArr_ = ['auth', 'system', 'other', 'money', 'warn'];
    				var html_ = '';
    				for(var i = 0; i < 5; i++) {
    					html_ += '<div class="divItem">';
    					html_ += '<div class="head">';
    					html_ += '<div class="headLeft"><div><span class="ico img system ' + imgArr_[i] + '"></span></div>系统消息</div>';
    					html_ += '<span class="pubTime">发布时间：2019-04-30</span>';
    					html_ += '</div>';
    					html_ += '<div class="msgbody">';
    					html_ += '<p class="msgTitle">哪些网站可以发布租房信息</p>';
    					html_ += '<p class="msgContent">一般情况下如果是租房信息的话，都是发到租房网去的，因为访问那些网站的网友很多都是站的网友很多都是.....<p></div>';
    					html_ += '</div>';
    				};
    				$('.msgContainer').html(html_);
    			};
    
    			$(window).resize(function() {
    				onResizeChg();
    			})
    		</script>
    	</body>
    
    </html>

## 效果图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2][]

## 温馨提示： ##

在通过rem计算出相对于HTML：fontSize的相对单位，在浏览器会存在相应的细微误差，所以在我们排布雪碧图的时候，图片之间要有1px+的间隔，好避免图片出现细微错位

# 雪碧图rem设置 #

> 假设.icon-sprite 为背景图 在这个上面需要设置background-size:10rem 20rem(这两个单位是背景图的宽和高)  
> 小图标：.icon-email .icon-phone 的宽和高(还有background-position也用rem表示就行)就可以按照正常rem那样去写就行position

### 问题： ###

有些情况下会有图片多那么一个像素或者少一个像素，所以在拼合雪碧图的时候，图片之前就需要有一定的空隙，不能挨着

## 安装rem快捷键 ##

[sublimeText 安装cssrem插件][sublimeText _cssrem]

[visual code 安装ps to rem插件][visual code _ps to rem]

[Link 1]: http://pan.baidu.com/s/1kUF8k31
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129112151658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129112517798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129151546875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[sublimeText _cssrem]: https://blog.csdn.net/hahahhahahahha123456/article/details/103313294
[visual code _ps to rem]: https://blog.csdn.net/hahahhahahahha123456/article/details/103314367