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

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

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

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

<酱紫出品>

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

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

相关阅读

相关 H5移动端—移动端布局及适配（rem）

1.rem适配原理首先清除一下默认样式，这个基本上所有写H5的都通用 a, input, button { -webkit-tap

比眉伴天荒/ 2023年06月09日 04:56/ 0 赞/ 25 阅读

相关 rem适配

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

短命女/ 2022年12月27日 02:26/ 0 赞/ 323 阅读

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

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

布满荆棘的人生/ 2022年11月20日 01:51/ 0 赞/ 183 阅读

相关 H5项目配置px与rem适配案例

H5项目配置px与rem适配案例说明：px与rem的适配不是固定的，可调整，本案例的换算关系是1rm=50px 如下图所示 ![在这里插入图片描述][waterm

逃离我推掉我的手/ 2022年10月22日 11:55/ 0 赞/ 293 阅读

相关 h5轻松实现rem适配

1. vs Code安装 px to rem & rpx (cssrem) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

分手后的思念是犯贱/ 2022年10月12日 14:55/ 0 赞/ 220 阅读

相关设计稿750px 配置rem

设计稿750px 配置rem > 获取设备宽度 > >750 等于750 > <320 等于320 > 设置字体大小设备宽度/7.5 1rem=100像素

桃扇骨/ 2022年08月29日 09:38/ 0 赞/ 274 阅读

相关 h5手机适配

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

怼烎@/ 2022年06月01日 14:22/ 0 赞/ 308 阅读

相关 viewport H5适配

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

短命女/ 2021年11月27日 05:32/ 0 赞/ 314 阅读

相关 vue h5适配

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

- 日理万妓/ 2021年10月19日 10:24/ 0 赞/ 347 阅读

相关 h5适配

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

- 日理万妓/ 2021年09月19日 23:50/ 0 赞/ 456 阅读