rem适配移动设备的方法示例

  发布时间:2019-04-25 15:26:44   作者:xiaoyueyue   我要评论

这篇文章主要介绍了rem适配移动设备的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

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

如何使用 rem

rem 单位的计算参考 html 的根节点 font-size进行计算,根节点的字体变化,布局参考的 rem 页面?#19981;?#30456;应进行缩放,此为 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. ?#23548;适?#29992;

将测量得出的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 * 需要适配的设备宽度 / 原设计稿宽度

?#30475;?#35745;算要除以 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. ?#23548;适?#29992;

还是上面熟悉的那个 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);

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

相关文章

  • 详解rem 适配布局

    当今手机种类繁多,所以不可能每一款手机?#23478;?#20889;一套布局样式,rem 就是用来自适应布局的,本文就详细的介绍了rem 适配布局,具有一定的参考价值,?#34892;?#36259;的小伙伴们可以参考
    2018-10-31
  • 关于rem适配的3种常用封装

    这篇文章主要给大家介绍了关于rem适配的3种常用封装,文中通过示例代码介绍的非常详细,对各位前端开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2018-07-13
  • 移动 web 端屏幕适配(rem)

    这篇文章主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配(rem),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-25
  • 详解html5页面 rem 布局适配方法

    本篇文章主要介绍了详解html5页面 rem 布局适配方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-12
  • 详解H5 活动页之移动端 REM 布局适配方法

    这篇文章主要介绍了详解H5 活动页之移动端 REM 布局适配方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-07
  • 手机端用rem+scss做适配的详解

    这篇文章主要介绍了手机端用rem+scss做适配的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-15

最新评论

时时彩包赢公式0369