最新rem适配H5 750设计稿代码

布满荆棘的人生 2022-11-20 01:51 235阅读 0赞

最新rem适配H5 750设计稿代码，比较严谨，项目中可直接使用，很简单方便

  1. <script>
  3.     //简单版
  4.     // function fontSize() { 
  5.     // let widths = document.documentElement.clientWidth; // 屏幕宽度
  6.     // let font = widths / 750 * 100; // 1rem == 100px
  7.     // document.documentElement.style.fontSize = font + 'px';
  8.     // }
  9.     // fontSize();
  10.     // window.onresize = () => { 
  11.     // fontSize();
  12.     // }
  14.     //严谨版
  15.     !(function (n) { 
  16.       var e = n.document, // 获取DOM
  17.         t = e.documentElement, // 获取html
  18.         i = 750, // 设计稿尺寸
  19.         d = i / 100, // 设置比例
  20.         o = "orientationchange" in n ? "orientationchange" : "resize", // 横屏orientationchange，竖屏resize
  21.         a = function () { 
  22.           var n = t.clientWidth || 375; // 屏幕宽度
  23.           n > 750 && (n = 750); // 屏幕宽度大于750 强制等于750
  24.           t.style.fontSize = n / d + "px"; // 设置转化后的html字体
  25.         };
  27.       e.addEventListener && // 监听
  28.         (n.addEventListener(o, a, !1), // !1为false，在冒泡过程中捕获
  29.           e.addEventListener("DOMContentLoaded", a, !1));// 网页加载完成后 绑定的一个事件
  30.     })(window);
  32.   </script>

<酱紫出品>

发表评论

表情：
评论列表 （有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

    相关 rem适配

    文章目录 一、什么是rem？ 二、rem适配原理 一、什么是rem？ rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍

    短命女短命女/ 0 赞/ 405 阅读

    相关 h5手机适配

    现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。 通过一天的查找资料跟以前的经验，总结了以下的方案： 1：前端样式固定用320px宽度做

    怼烎@怼烎@/ 0 赞/ 379 阅读

    相关 vue h5适配

    vue h5适配(px自动转rem) 最近公司接手一个H5项目，重构后一直说我的页面有问题，后来发现前期公司搭建项目时没有做适配，后来通过查找资料，找到了一套如何将px自

    - 日理万妓- 日理万妓/ 0 赞/ 405 阅读

    相关 h5适配

    > H5页面开发适配方案，平时的一些小总结，希望能帮助到大家。 博客维护在git上，欢迎给一个star!!! https://github.com/mtonhuang/blo

    - 日理万妓- 日理万妓/ 0 赞/ 539 阅读