美文网首页
vue移动端适配

vue移动端适配

作者: 辉夜真是太可爱啦 | 来源:发表于2019-06-18 10:36 被阅读0次

在根目录的utils文件夹中新建rem.js,如果没有utils则自己新建,一般utils文件夹都是存放公用方法的,在rem.js中写入以下内容

(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 = 100 * (clientWidth / 750) + 'px';
var clientWidth = docEl.clientWidth;
                    if(!clientWidth) return;
                    
                    if(clientWidth>=1920){
                        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
                    }else if(clientWidth>=1680){
                        docEl.style.fontSize = 100 * (clientWidth / 1680) + 'px';
                    }else if(clientWidth>=1440){
                        docEl.style.fontSize = 100 * (clientWidth / 1440) + 'px';
                    }else if(clientWidth>=1280){
                        docEl.style.fontSize = 100 * (clientWidth / 1280) + 'px';
                    }
                    else if(clientWidth>=1263){
                        docEl.style.fontSize = 100 * (clientWidth / 1263) + 'px';
                    }else{
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
        };

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

main.js中进入引入

import '../../utils/rem.js'

使用方法,所有的px单位都转换为rem,例如100px=1rem;

相关文章

  • 如何在Vue项目中使用vw实现移动端适配

    Vue项目中使用vw实现移动端适配 我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终...

  • 移动端如何适配?

    1、使用Flexible实现手淘H5页面的终端适配2、再聊移动端页面的适配3、如何在Vue项目中使用vw实现移动端...

  • vue移动端适配

    网址:https://segmentfault.com/a/11900000160398481.复制粘贴里面的JS...

  • Vue移动端适配

    一、配置flexible1、安装lib-flexible 2、全局引用文件(在mian.js中引入) 3、在项目根...

  • vue移动端适配

    首先安装插件 在main.js中进行引入 然后安装px转换为rem的插件 找到build文件夹下的utils.js...

  • vue 移动端适配

    vue适配:以750设计稿为基准,在不同屏幕尺寸下如何适配 Safari中设置了禁止用户缩放无效的问题: iOS ...

  • vue移动端适配

    在根目录的utils文件夹中新建rem.js,如果没有utils则自己新建,一般utils文件夹都是存放公用方法的...

  • vue 移动端适配

    这里我写一下我自己用的vue 移动端适配 ,可能跟别人的不一样。但是效果是一样的。我是安装 amfe-flexib...

  • vue 移动端适配

    一、方法一:rem 布局 在主入口:index.html, 标签内添加如下JS 代码:(实现在标准 375px宽...

  • vue 移动端适配

    1.安装配置PostCSS插件 2.在根目录.postcssrc.js文件中配置一下文件没有就新建一个 在inde...

网友评论

      本文标题:vue移动端适配

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