<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{ width:100%; height:1rem; background: red; } li{ width:1rem; height:1rem; font-size:0.2rem; color:blue; float:left; } </style> </head> <body> <ul> <li>小桥</li> <li>流水</li> <li>人家</li> </ul> </body> <script type="text/javascript"> // 移动端适配 function rems(){ // 获取屏幕宽度(此处是一个兼容的写法) var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth; // 设置根元素的fontSize的大小，此处的3.2是--设计图的宽度/100 document.documentElement.style.fontSize=htmlWidth/3.2+"px"; // 设置条件屏幕宽度最大值 if(htmlWidth>640){ htmlWidth=640; document.documentElement.style.fontSize=htmlWidth/3.2+"px"; } } // 默认调用适配函数 rems(); // window大小变化时调用适配函数 window.onresize=function(){ rems() } </script> </html>