vue中使用flexible.js实现屏幕自适应

ゝ一纸荒年。 2021-07-25 12:42 1501阅读 0赞

## 一、下载**flexible.js** ##

cnpm i -S lib-flexible

## 二、main.js中引入 ##

import 'lib-flexible/flexible.js'

## 三、在nodemodule/lib-flexible/flexible.js中修改代码如下： ##

function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            // if (width / dpr > 540) {
            //     width = 540 * dpr;
            // }
            // var rem = width / 10;
    
            // 最小1366px，最大适配2560px
            if (width / dpr < 1366) {
                width = 1366 * dpr;
            } else if (width / dpr > 2560) {
                width = 2560 * dpr;
            }
            // 设置成24等份，设计稿时1920px的，这样1rem就是80px
            var rem = width / 24;
            docEl.style.fontSize = rem + 'px';
            flexible.rem = win.rem = rem;
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/dad24773640f4171bfb8a4dde827eeaf.png

发表评论取消回复

表情：

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

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

相关阅读

相关【vue】自适应屏幕大小

需求：加一张图片，并自适配所有机型的宽度解决：只需要固定宽度为100%即可 <img class="img" src="@/assets/imgs/hom

比眉伴天荒/ 2023年09月26日 14:47/ 0 赞/ 244 阅读

相关 vue+element-ui 字体自适应不同屏幕

项目背景：屏幕自适应问题，当在不同分辨率的屏幕上显示页面时，页面的字体需要根据屏幕大小来自适应，想到使用rem作为字体的单位 vue-cli脚手架下的index.html中写

忘是亡心i/ 2023年08月17日 16:34/ 0 赞/ 173 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

以你之姓@/ 2022年08月13日 17:41/ 0 赞/ 325 阅读

相关自适应屏幕设置

参考[@media自适应屏幕][media] 1024\500 （8.9寸） 1024\768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1

我就是我/ 2022年05月23日 10:49/ 0 赞/ 394 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

野性酷女/ 2022年05月14日 00:09/ 0 赞/ 408 阅读

相关 NGUI屏幕自适应

屏幕自适应 NGUI可以比较方便的实现屏幕自适应，但是它的官方教程里面针对这个问题没有详细的教程，所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较

冷不防/ 2022年04月11日 10:45/ 0 赞/ 407 阅读

相关 VMware屏幕自适应

下载VMware Tool ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

左手的ㄟ右手/ 2022年02月21日 15:58/ 0 赞/ 378 阅读

相关 unity屏幕自适应

下面以竖屏游戏为例，步骤如下： 1.新建工程 2.选择发布平台。File--BuildSettings...--PlatForm里面选择平台--Switch Platf

喜欢ヅ旅行/ 2021年09月16日 05:42/ 0 赞/ 695 阅读

相关 vue-echarts基本使用以及自适应屏幕

一、基本使用 vue-echarts的GitHub地址：[https://github.com/ecomfe/vue-echarts/blob/master/READ

向右看齐/ 2021年07月26日 00:47/ 0 赞/ 756 阅读

相关 vue中使用flexible.js实现屏幕自适应

一、下载flexible.js cnpm i -S lib-flexible 二、main.js中引入 import 'lib-flexible/

ゝ一纸荒年。/ 2021年07月25日 12:42/ 0 赞/ 1502 阅读