vue项目配置rem

冷不防 2022-12-17 11:00 104阅读 0赞

export default function() { 
        // 7.5根据设计稿的横向分辨率/100得来
        var deviceWidth = document.documentElement.clientWidth;
        // var deviceWidth = window.screen.availWidth
        // console.log(navigator.userAgent)
        // console.log(deviceWidth)
        // console.log(navigator.userAgent)
        if(deviceWidth > 750) { 
            // deviceWidth = 750;
            deviceWidth = 7.5 * 100;
        }
    
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    
        // 禁止双击放大
        document.documentElement.addEventListener('touchstart', function (event) { 
            if (event.touches.length > 1) { 
                event.preventDefault();
            }
        }, false);
        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) { 
            var now = Date.now();
            if (now - lastTouchEnd <= 300) { 
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue-8.Vue项目配置详解

回顾（以下是nodejs自动生成，我还会加入一些没有的） my-vue-project/

爱被打了一巴掌/ 2024年03月23日 23:20/ 0 赞/ 98 阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 181 阅读

相关 nginx配置vue项目

1.在网上找一下nginx的安装教程 2.下载Xshell和Xftp（用我的就行）链接：https://pan.baidu.com/s/1D7zpxY3cbiVv6PpJ

浅浅的花香味﹌/ 2023年06月12日 09:26/ 0 赞/ 41 阅读

相关 Vue项目 rem自动转换 px 为 rem，高保真还原设计图

Vue项目自动转换 px 为 rem，高保真还原设计图前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代

迈不过友情╰/ 2023年06月07日 12:24/ 0 赞/ 26 阅读

相关 vue 中使用rem布局

vue 中使用rem布局在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 此处已vue为例,在使用vue-cl

￡神魔★判官ぃ/ 2023年02月22日 05:21/ 0 赞/ 16 阅读

相关 vue项目配置rem

export default function() { // 7.5根据设计稿的横向分辨率/100得来 var deviceWidth

冷不防/ 2022年12月17日 11:00/ 0 赞/ 105 阅读

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

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

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

相关 vue项目中使用rem替换px-使用方法-01

> 移动端页面适配，rem和vw适配方案 > > 基础点：rem相对根节点字体的大小。所以不用px; > 根字体：字体的大小px; > px：你就当成cm(厘米)这样

女爷i/ 2022年10月12日 15:52/ 0 赞/ 82 阅读

相关 vue中rem如何配置

vue中rem的配置开发移动端，我们常常会因为把握不好尺度而觉得十分难受，因此可以用到rem+flex进行，那么vue中我们该如何如何配置呢？ 1. 在js中统

末蓝、/ 2022年04月02日 15:54/ 0 赞/ 316 阅读

相关 vue中将px自动转成rem，px转rem的方式，项目中使用rem

一、vue中将px自动转成rem： [https://segmentfault.com/a/1190000015238394][https_segmentfault.com_

系统管理员/ 2022年01月22日 05:53/ 0 赞/ 582 阅读