手机端布局 - rem计算 - Android

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

功能说明：以一个640px的宽度为基准，最小不低于320px，当大于640px时，让其在页面中居中。

如果正处于640 - 320之中的，都按照js进行等比例的缩放。

这里我们规定1rem = 100px

--------------------------------------------------------------------------------------------------------

代码：

function Rem(){ var radio = function(){ var r = document.documentElement.clientWidth / 6.4; return r>=100?100:r<=50?50:r; } document.documentElement.style.fontSize = radio() +'px'; window.addEventListener('resize',Rem,false); }

调用代码：

Rem();

应用举例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width" /> <title>phone</title> <script> function Rem(){ var radio = function(){ var r = document.documentElement.clientWidth / 6.4; return r>=100?100:r<=50?50:r; } document.documentElement.style.fontSize = radio() +'px'; window.addEventListener('resize',Rem,false); } Rem(); </script> <style> *{margin:0px;padding:0px;list-style:none;} .wrap{width:100%;max-width:640px;min-width:320px;margin:0px auto;} .box,.box ul{width: 100%;background:#eee;} .box li{width: 1rem;height: 1rem;background:red;margin:0px auto;} </style> </head> <body> <div class="wrap"> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>