js自适应rem -- 主要适用于移动端

rem是指相对于根元素(html)的字体大小的单位, 利用它能实现强大的屏幕适配布局。下面主要应用的是基于js去调整根元素字体大小, 从而实现各个尺寸屏幕的适配;

//designWidth:设计稿的实际宽度值,需要根据实际设置 //maxWidth:制作稿的最大宽度值,需要根据实际设置 //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width>maxWidth && (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(750, 750);

使用方法:

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小,调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素,例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

注: html font-size字体大小 = 设备宽度 / (设计图尺寸 / 100);
假设提供的设计稿为750PX的,那么:
deviceWidth = 320,font-size = 320 / 7.5 = 42.6666px
deviceWidth = 375,font-size = 375 / 7.5= 50px
deviceWidth = 414,font-size = 414 / 7.5 = 55.2px
deviceWidth = 500,font-size = 500 / 7.5 = 66.6666px

实际应用:假设有一个750的设计稿分上中下三个部分, 上(650*80), 中(左边:200*130, 右边:420 * 130), 下(650 * 200)

则实现代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <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"> <meta content="email=no" name="format-detection"> <meta name="keywords" content="" /> <title>rem demo</title> <link rel="stylesheet" href="base.css"> <script type="text/javascript"> ; (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width > maxWidth && (width = maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(750, 750); </script> <style media="screen"> html, body { margin: 0; padding: 0; } .header { width: 6.5rem; height: 0.8rem; background: red; margin: 0 auto 0.2rem; } .body { width: 6.5rem; height: 3rem; background: blue; overflow: hidden; margin: 0 auto; margin-bottom: 0.2rem; } .body_left { width: 2rem; height: 3rem; background: #eb4509; float: left; } .body_right { width: 4.2rem; height: 3rem; background: green; margin-left: 0.3rem; float: left; } .footer { width: 6.5rem; height: 2rem; background: purple; margin: 0 auto; } </style> </head> <body> <!-- 正文 --> <div class="container"> <div class="header"> </div> <div class="body"> <div class="body_left"> </div> <div class="body_right"> </div> </div> <div class="footer"> </div> </div> </body> </html>

这样不论我们屏幕的尺寸怎么变化, 我们画好的页面总是能按照定好的比例调整;

posted @ 2020-10-13 10:06  码路上的奋斗  阅读(420)  评论(0编辑  收藏  举报