vue-cli3.0中大屏使用rem做响应式(引入rem.js)

淡淡的烟草味﹌ 2021-09-29 18:50 477阅读 0赞

因为目前有px转换rem的插件但是我不想用感觉费劲

首先我们先找一段rem.js引入到vue的index.html中

上代码:

<script type="text/javascript">
          /*
          * @ pwidth 设计稿的宽度
          * @ prem 你要1rem比多少px  我的是1rem比100px
          * */
          (function (doc, win, pwidth, prem) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if (!clientWidth) return;
                      docEl.style.fontSize = clientWidth / pwidth * prem + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window, 1920, 100);
    
        </script>

传值就不用我说了吧   在1920,和100那动粗就行了

这是index.html中的截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70][]

注意了  在写css的时候单位要都用rem  剩下的不用我说了吧

希望能帮到需要帮助的人,有更好的办法请留下你的宝贵评论!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70]: /images/20210726/3cc8c5427d724dec9a0f43f778e52f7e.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 31 阅读

相关 bootstrap 响应式_如何使用Bootstrap建立响应式量表

bootstrap 响应式 In this tutorial, we’ll be taking an in-depth look at how Bootstrap handl

r囧r小猫/ 2022年12月03日 01:43/ 0 赞/ 251 阅读

相关 VueCli3.0 rem 适配不同分辨率

npm install postcss-px2rem px2rem-loader --save utils / rem.js const baseSiz

逃离我推掉我的手/ 2022年10月06日 12:45/ 0 赞/ 231 阅读

相关 20个全屏响应式菜单效果荟萃

[![bd5c9e5e-97aa-4890-ace7-b586a6e0ce72.jpg][]][bd5c9e5e-97aa-4890-ace7-b586a6e0ce72.jpg

落日映苍穹つ/ 2022年08月11日 11:28/ 0 赞/ 182 阅读

相关移动wapapp 用rem来做响应式开发

[Demo][Demo] [![Center][]][Demo] 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分

女爷i/ 2022年08月09日 02:29/ 0 赞/ 165 阅读

相关响应式rem介绍

在页面中设置字体，我们知道有常见的两种，px 和 em. px 在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当

爱被打了一巴掌/ 2022年06月16日 12:30/ 0 赞/ 148 阅读

相关响应式布局中rem、em、vw设置字体大小自适应

rem 是指根元素（root element，html）的字体大小，从遥远的 IE6 到 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这

怼烎@/ 2022年06月10日 11:28/ 0 赞/ 1042 阅读

相关 rem/em/响应式用法总结

Js动态设置rem来实现移动端字体的自适应　　实际上大家可能了解rem的用法，但是还不了解如何利用rem去实现移动端的自适应。说到底rem实现移动端自适应的原来在于它本身的

ゝ一世哀愁。/ 2022年05月27日 01:21/ 0 赞/ 120 阅读

相关单屏页面响应式适配玩法

首先瞅一下效果图接着就是思考怎么做，我的想法如下图。 ![image][] 把公共的 `页头` 、`页脚`、`导航栏`、`边框` 放到最顶层，比方说设置层级为 `999

一时失言乱红尘/ 2022年02月27日 01:30/ 0 赞/ 293 阅读

相关 vue-cli3.0中大屏使用rem做响应式(引入rem.js)

因为目前有px转换rem的插件但是我不想用感觉费劲首先我们先找一段rem.js引入到vue的index.html中上代码: <script type="

淡淡的烟草味﹌/ 2021年09月29日 18:50/ 0 赞/ 478 阅读