<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } section{ width: 9.8rem; height: 2.45rem; margin: 0 auto; } section>div{ float: left; width: 2.45rem; height: 2.45rem; border-right: 1px solid #ccc; position: relative; box-sizing: border-box; } section>div .tu{ width: 1.2rem; height: 1.2rem; background-image:url(home-fivemain-sprite2x@v7.15.png); position: absolute; background-size:2.85rem auto; background-position:-1.245rem -4.65rem; top: 0.2rem; left:50%; margin-left: -0.6rem; } </style> </head> <body> <section> <div> <div class="tu"></div> </div> <div> <div class="tu"></div> </div> <div> <div class="tu"></div> </div> <div> <div class="tu"></div> </div> </section> <script> s(); window.onresize = s; function s(){ // 读取浏览器的屏幕宽度 var windowWidth = document.documentElement.clientWidth; // 看当前的屏幕宽度是设计图600宽度的多少倍 var rate = windowWidth / 600; // 就要字号设置为60的多少倍，所以一行就是10rem document.documentElement.style.fontSize = 60 * rate + ‘px‘; } </script> </body> </html>
喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”
原文：https://www.cnblogs.com/qdwds/p/11706875.html