<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>移动端--rem案例</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ //仿淘宝 设置html基值 var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; }); /* $(function(){ var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 6.4 + 'px'; var $winW=$(window).width(),$winH=$(window).height(),$root=($winW/6.4).toFixed(0)+"px"; $("html").css("fontSize",$root); })*/ </script> <style> *{margin:0;padding:0;} html,body{ width:100%; height:100%; } .container{ padding-top:.47rem; width:9.38rem; margin:0 auto; } h1{ font-size:48px; color:#fcbe2a; text-align:center; margin-bottom:1.16rem; } h2{ padding-left:.44rem; margin-bottom:1.06rem; font-size:28px; color:#ee620e; } ul,li{ list-style:none; } ul{ background:#808080; } li{ float:left; width:2.84rem; height:2.84rem; line-height:2.84rem; margin-right:.42rem; text-align:center; font-size:16px; background:#00ff00; } li:last-child{ float:right; margin:0; } .clearfix{ zoom:1; } .clearfix:after{ content:"."; display:block; visibility:hidden; clear:both; width:0; height:0; } </style> </head> <body> <div class="container"> <h1>我是大标题</h1> <h2>我是二标题</h2> <ul class="clearfix"> <li>模块1</li> <li>模块2</li> <li>模块3</li> </ul> </div> </body> <script> </script> </html>