清风细雨楼

rem适配移动设备的方法示例
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

前言

移动端 rem 适配方案回顾总结

如何使用 rem

rem 单位的计算参考 html 的根节点 font-size进行计算，根节点的字体变化，布局参考的 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; /* 699/16 => 43.6875rem; */
  height: 90px; /* 90/16px => 5.625rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/16=> 0.375rem; */
}

自己计算太繁琐，使用 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";

2. 实际使用

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

.btn {
  width: 699px; /* 699/100 => 6.99rem; */
  height: 90px; /* 90/100 => 0.9rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/100=> 0.06rem; */
}

不得不说，有了 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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com