使用rem如何适配移动设备

使用rem如何适配移动设备？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

1. 动态改变 html 的 font-size 值

几乎在每个浏览器都将 html 的 font-size 初始化 为 16px ， 我们动态改变的话可以暂时将 16px 设置为 rem 适配的根节点 font-size 初始值。

那么如何进行适配动态修改？

假定设计稿宽度 为 750px，我们定义了自己使用 1rem = 16px 的单位去布局，如何适配呢？

在 chrome 的 手机 iphone 模拟器宽度为 375px，正好为设计稿的 一半，我们可以口算: 当时的 1rem 应该等于初始化时 html 节点 font-size 的一半,即 newFontSize = 16/2 = 8px,这样一半对一半不就适配了吗...

从中得到公式 设计稿宽度/16px = 需要适配的设备宽度/8px,能够看出 新的 font-size 是参考 当前的设备宽度与原设计稿的宽度，进行等比缩放的

最终得到 newFontSize = 16px * 需要适配的设备宽度 / 原设计稿宽度

(function(doc, win) {  var resizeEvt =      "orientationchange" in window ? "orientationchange" : "resize",    setRemResponse = function() {      var vM = 750;      var vfontSize = 16;      var html = doc.documentElement;      var newfontSize = (vfontSize * html.clientWidth) / vM;      html.style.fontSize = newfontSize + "px";    };  doc.addEventListener("DOMContentLoaded", setRemResponse, false);  win.addEventListener(resizeEvt, setRemResponse, false);})(document, window);

2. 实际使用

将测量得出的btn 按钮的样式从 px转换 为 rem

.btn {  width: 699px;   height: 90px;   background: rgba(90, 173, 246, 1);  border-radius: 6px; }

自己计算太繁琐，使用 sCSS 定义 函数代替计算过程

@function pxToRem($initialStyle) {  @return $initialStyle/16 * 1rem;}

那么上面的 css改写为:

.btn {  width: pxToRem(699);  height:pxToRem(90);  background: rgba(90, 173, 246, 1);  border-radius:pxToRem(6);}

补充： vscode 的插件 cssrem 支持计算 将我们在 css,scss 中输入的 px 转换为 rem 单位，默认设置的 font-size 为 16px

计算方法变形，口算 rem

1. 简单分析

分析上一节我们最终得到 newFontSize = 16px * 需要适配的设备宽度 / 原设计稿宽度

每次计算要除以 16 很是繁琐，我们若将 初始的 html 根节点 font-size变为方便计算的，反正它最终做为一个除数，变为多少呢? 是否 100 更为方便呢？对了！

const oHtml = document.documentElement;const clientWidth = oHtml.clientWidth;var vM = 750;var vfontSize = 100;// 移动设备oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

实际使用

还是上面熟悉的那个 btn, 将px转换 为 rem, 口算得出结果。

.btn {  width: 699px;   height: 90px;   background: rgba(90, 173, 246, 1);  border-radius: 6px; }

不得不说，有了 scss 是真的方便！

@function reduced100($initialStyle) {  @return $initialStyle/100 * 1rem;}

那么上面的 css函数方法改写为:

.btn {  width: reduced100(699);  height:reduced100(90);  background: rgba(90, 173, 246, 1);  border-radius:reduced100(6);}

怎么样，rem 原来就是这么简单！！！

工具函数

上面的方法，二选其一就可以了，毕竟现在 javascript 的 执行效率不差！

(function(doc, win) {  var resizeEvt =      "orientationchange" in window ? "orientationchange" : "resize",    setRemResponse = function() {      var vM = 750;      var vfontSize = 16;      var html = doc.documentElement;      var newfontSize = (vfontSize * html.clientWidth) / vM;      html.style.fontSize = newfontSize + "px";    };  doc.addEventListener("DOMContentLoaded", setRemResponse, false);  win.addEventListener(resizeEvt, setRemResponse, false);})(document, window);

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。