text: <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>REM-sprites</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <style>
  *{ margin:0; padding:0; list-style:none;}
  html{ font-size:20px;}
  div{ float:left; margin:0.2rem;}
  .icon1{ width:3.5rem; height:3.5rem; background:url(sprite.png) no-repeat; overflow:hidden; background-size:3.5rem;}
  .icon2{ width:3.5rem; height:3.5rem; background:url(sprite.png) no-repeat 0 -3.5rem; overflow:hidden; background-size:3.5rem;}
  .icon3{ width:3.5rem; height:3.5rem; background:url(sprite.png) no-repeat 0 -7rem; overflow:hidden; background-size:3.5rem;}
  .icon4{ width:3.5rem; height:3.5rem; background:url(sprite.png) no-repeat 0 -10.5rem; overflow:hidden; background-size:3.5rem;}
  .icon5{ width:3.5rem; height:3.5rem; background:url(sprite.png) no-repeat 0 -14rem; overflow:hidden; background-size:3.5rem;}
  
  
  /*以下是解决问题的代码 icon4 icon5解决了此问题*/
  .icon-fix {
  	background: none;
  	position: relative;
  	overflow: hidden;
  }
  
  .icon-fix:after {
  	content: '';
  	display: block;
  	width: 10000%;
  	height: 10000%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	background-image: url(sprite.png);
  	background-repeat: no-repeat;
  	background-size: 350rem;
  	-webkit-transform-origin: 0 0;
  	-webkit-transform: scale(.01);
  	transform-origin: 0 0;
  	transform: scale(.01);
  }
  
  .icon4:after {
  	background-position: 0 -1050rem;
  }
  .icon5:after {
  	background-position: 0 -1400rem;
  }
  </style>
  <script>
  window.onload=window.onresize=function(){
  	document.documentElement.style.fontSize=document.documentElement.clientWidth/16+'px';	
  };
  </script>
  </head>
  
  <body>
  <div class="icon1"></div>
  
  <div class="icon2"></div>
  <div class="icon3"></div>
  
  <div class="icon4 icon-fix"></div>
  <div class="icon5 icon-fix"></div>
  </body>
  </html>
  