精华内容
下载资源
问答
  • 问题描述:在大小屏幕切换时页面宽高不能自动变化,需要手动刷新一下才行 在需要的页面xx.VUE中进行配置 mounted() { var _this = this; window.onresize = function(){ // 定义窗口大小变更通知事件 _...

    问题描述:在大小屏幕切换时页面宽高不能自动变化,需要手动刷新一下才行

    在需要的页面xx.VUE中进行配置

      mounted() {
    
                var _this = this;
    
                window.onresize = function(){ // 定义窗口大小变更通知事件
    
                    _this.screenHeight = document.documentElement.clientHeight; //窗口宽度
    
                };
    
            },

    展开全文
  • vue不同屏幕分辨率适配(px2remLoader的方法) 采用的是 lib-flexible的可伸缩布局的方法 1、下载lib-flexible npm i lib-flexible --save 2、在项目入库文件main.js里引入lib-flexible import 'lib-flexible' 3、...

    vue不同屏幕分辨率适配(px2remLoader的方法)

    采用的是 lib-flexible的可伸缩布局的方法

    1、下载lib-flexible

    npm i lib-flexible --save
    

    2、在项目入库文件main.js里引入lib-flexible

    import 'lib-flexible'
    

    3、下载px2rem-loader

    npm i px2rem-loader --save-dev
    

    4、在build文件下utils.js里对px2rem进行配置

    var cssLoader = {
    loader: 'css-loader',
        options: {
        sourceMap: options.sourceMap
      }
    }
    var px2remLoader = {
    loader: 'px2rem-loader',
        options: {
        remUnit: 192
      }
    }
    
    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
        //其他代码
    }
    
    展开全文
  • 新建Vue项目 步骤网上资料很多,这里不再赘述! 安装依赖 1.安装阿里可伸缩布局依赖lib-flexible npm i lib-flexible -S 2. 安装px转rem依赖px2rem npm i px2rem -S 3.在项目的入口文件 main.js 里引入 lib-...

    新建Vue项目

    步骤网上资料很多,这里不再赘述!

    安装依赖

    1.安装阿里可伸缩布局依赖lib-flexible

    npm i lib-flexible -S
    

    2. 安装px转rem依赖px2rem

    npm i px2rem -S
    

    3.在项目的入口文件 main.js 里引入 lib-flexible

    import "lib-flexible"
    

    在这里插入图片描述
    因为依赖中当屏幕宽度大于540后,width固定写死了,需要修改依赖文件lib-flexible/flexible.js
    在这里插入图片描述

    4.验证一下是否起作用

    在App.vue中写两个div进行测试
    在这里插入图片描述
    在这里插入图片描述
    从图中可以看到已经起作用了

    5.配置px2rem,页面中非行内样式中的px会自动转换成rem

    在build/utils.js中增加代码

      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 192   // 这个值是根据UI设计的尺寸宽度/10,1920*1080设计稿,这个值就是1920/10 = 192
        }
      }
    
      // generate loader string to be used with extract text plugin
      function generateLoaders (loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] // 将px2remLoader 添加到loaders数组中
     
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }
    ...
    

    重启运行程序,然后修改App.vue中测试div的宽度以px为单位
    在这里插入图片描述
    运行结果,查看元素,已经px自动转换成rem
    在这里插入图片描述

    注意:设计稿1920*1080分辨率是屏幕全屏时的效果

    展开全文
  • 看到很多用vue的“大神”在实现动态分辨率适配的时候竟然还要引入第三方插件,实在受不了,教教这些人,用css的属性就完全可以实现同页面同组件不同样式的。 直接上代码: /* 分辨率宽度在1360px以下时 */ <style...

    看到很多用vue的“大神”在实现动态分辨率适配的时候竟然还要引入第三方插件,实在受不了,教教这些人,用css的属性就完全可以实现同页面同组件不同样式的。
    直接上代码:

    /* 分辨率宽度在1360px以下时 */
    <style lang="scss" scoped>
    	@media screen and (max-width: 1360px) { 
    		//只要设置了这个最大尺寸,就可以根据不同的情况单独设置组件的样式了
    		.item-content {
    			width: 100px;
    		}
    	}
    </style>
    
    展开全文
  • 作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率的适配; 那么如何做好屏幕分辩率的适配呢,我总结了以下几点: 1.使用amfe-flexible,将px转换为rem,用于适配不同宽度的屏幕 首先安装amfe-...
  • 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem npm i lib-flexible -S npm i px2rem-loader -D 二、在vue.config.js配置,这里...
  • vue项目适配pc端的各种屏幕分辨率

    千次阅读 2020-09-09 16:51:40
    vue项目适配pc端的各种屏幕分辨率 在pc项目开发的时候,要适用PC端的各种屏幕分辨率 1.先安装插件 npm install px2rem-loader npm install lib-flexible 2.在build文件下的utils.js文件下,添加 //1 const px2...
  • 根据屏幕分辨率大小加载不同CSS.

    千次阅读 2016-09-30 15:54:13
    一、根据屏幕分辨率大小加载不同CSS. html> head> html; charset=gb2312" /> var w=window.screen.width;//先获取屏幕分辨率大小 var c; if(w==1280){ c="a.css"; }else if(w==1024){ c="d.css"; }else if(w...
  • vue实现PC端分辨率适配

    万次阅读 多人点赞 2019-07-25 16:12:23
    项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化...
  • Vue PC端分辨率自适应

    千次阅读 2019-11-29 11:59:54
    因为在做超市POS收银系统的时候,遇到需要适配不同的PC端的分辨率,原来PC还能做自适应的呀,感觉发现了新大路,于是打算做一下笔记。 当然我在做的过程中也借鉴了其他大佬的写的,如: ... 先下载所需要的插件 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,389
精华内容 955
关键字:

vue根据屏幕分辨率

vue 订阅