美文网首页
js实现px转rem

js实现px转rem

作者: 高磊_IT | 来源:发表于2020-06-07 11:46 被阅读0次

/* px转rem

*js

*这里在375的设备上1rem = 20px,在其他屏幕宽的时候会自动根据这个比例来动态调整

*需要自己计算

*/

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

————————————————
版权声明:本文为CSDN博主「gaolei_eit」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_39428080/article/details/99978108

相关文章

  • js实现px转rem

    /* px转rem *js *这里在375的设备上1rem = 20px,在其他屏幕宽的时候会自动根据这个比例来动...

  • vue3+vite 使用postcss-pxtorem

    安装插件 与package.json同级目录创建postcss.config.js文件 这里只实现了 px转rem...

  • 淘宝flexible.js+rem适配pc端

    在页面引入此js,然后所有px换成rem单位,即可实现自适应。vscode有插件可以自动计算px和rem的转换 下...

  • 移动端兼容

    rem与px的转换 flexible.js 布局详解 rem自适应布局的回顾总结 flexible.js如何实现r...

  • JS手机端自适应单位转换引用插件

    仅用于简单或是单个页面使用 flexible.min.js 使用,px除以100转rem即可 //引...

  • Invalid PostCSS Plugin found

    vue 使用px转rem 安装好postcss-pxtorem 之后也出现了.postcssrc.js 文件,但是...

  • 项目中常用到的js方法整理

    一.change_view.js 用于手机端页面rem布局换算 640px=>6.4rem;100px=>1rem...

  • 在 Vue Cli 3 中使用 px2rem

    # 安装 postcss-px2rem # 在 vue.config.js 中添加配置 # 添加 rem.js #...

  • vue做rem适配

    安装postcss-px2rem及px2rem-loader 2.创建rem文件 3在main.js中引入适配文件...

  • 2018-06-01

    rem Rem实现响应适配时,只要将转rem的px与初始屏幕宽度(即根据屏幕宽度变化的根元素字体大小)关系对应好,...

网友评论

      本文标题:js实现px转rem

      本文链接:https://www.haomeiwen.com/subject/wlfctktx.html