Vue实现PC端分辨率自适应的示例代码

目录
  • 方案
  • 安装依赖
  • 引入依赖
  • px转换成rem
  • 修改flexible.js
  • 参考博客

方案

  • lib-flexible+ px2remLoader
  • lib-flexible：阿里可伸缩布局方案
  • px2rem-loader：px转rem

安装依赖

npm install px2rem-loader -D
npm install lib-flexible -S

引入依赖

main.js引入lib-flexible

import 'lib-flexible'

px转换成rem

vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的，我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是 1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里假设设计稿宽为1920px

build/utils.js中添加px2remLoader

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

放进loaders数组中

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

修改flexible.js

全局搜索flexible.js

将代码修改为适应PC端的代码

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

对于不想被转换的样式，可在其后添加/*no*/保证不被转换

参考博客

VUE PC端适应方案flexible + px2remLoader 感谢大佬
vue实现PC端分辨率适配 感谢大佬

到此这篇关于Vue实现PC端分辨率自适应的示例代码的文章就介绍到这了,更多相关Vue PC端分辨率自适应 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla

  • vue2之简易的pc端短信验证码的问题及处理方法

    <提示语部分不要在意(非重点部分)> 简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的 子组件模板部分如下(code部分是很基础的) <template> <div class="forget"> <el-dialog title="修改新密码" :visible.sync="dialog.visible" :close-on-click-modal="false

  • vue实现PC端分辨率适配操作

    依赖 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之

  • vue实现PC端录音功能的实例代码

    录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed

  • Vue实现PC端靠边悬浮球的代码

    我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录 嗯,具体代码: <div :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']" @mouseleave="uploadleave" @mouseenter="uploadent

  • 从零撸一个pc端vue的ui组件库( 计数器组件 )

    听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件用的比较少,就是那种左边一个'-'右边一个'+', 控制某些数量的时候才会用到, 比如我之前做的商城小程序只有'下单'页面的规格弹出框里面才有他的身影, 如果是涉及到处理商品数量很频繁的业务场景应该会很常见吧, 但是不要看这个组件小, 编写它的时候坑还不少, 本次我们就来做一个计数器, 目标就是尽可能小, 尽可能的省性能. 1:需求分析 每次+1 -1是常态, 但是如果搞活动, 每次最少为+-2个或三个, 就要兼容一下了,( 举一个

  • 使用vue实现简单键盘的示例(支持移动端和pc端)

    使用vue实现简单键盘的示例(支持移动端和pc端)

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v

  • vue使用localStorage保存登录信息 适用于移动端、PC端

    众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用cookies或者session保存登录的token,在手机端无法保存,每次打开app依然提示登录.那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下 1.vuex stroe代码 index.js import Vue from 'vue' import vuex from 'vuex' import { login, logout

  • Vue实现PC端分辨率自适应的示例代码

    Vue实现PC端分辨率自适应的示例代码

    目录 方案 安装依赖 引入依赖 px转换成rem 修改flexible.js 参考博客 方案 lib-flexible+ px2remLoader lib-flexible:阿里可伸缩布局方案 px2rem-loader:px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem vue-loader的o

  • python+pywinauto+lackey实现PC端exe自动化的示例代码

    python+pywinauto+lackey实现PC端exe自动化的示例代码

    欢迎阅读 最近一年多一直在从事PC端exe的测试,也是趁着闲余时间,调研了下exe的自动化. 核心框架为python+pywinauto+lackey这样的一个组合方式 本文以大家熟知的Tim为例子,实现打开exe,输入账号密码并且登录,搜索具体聊天对象,发送消息,并退出账号的一系列简单操作. 依然是从环境搭建开始,我会尽我所能,详细的去介绍每一步,让各位能看懂我每一步操作的目的和理由.只对代码感兴趣的,跳到文章最后即可. 框架介绍 以python3为基础进行程序设计. pywinauto是基于

  • vue-image-crop基于Vue的移动端图片裁剪组件示例

    本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,分享给大家,具体如下: 代码地址:https://github.com/jczzq/vue-image-crop vue-image-crop 基于Vue的移动端图片裁剪组件 组件使用URL.createObjectURL()等新特性,使用前注意兼容问题.IE >= 10 注意:该组件适用于 PC 端,不推荐手机端使用. 功能预览 快速开始 安装Node >= 8.9.0(推荐LTS = 8.11.0) # 安装 vue

  • vue2+tracking实现PC端的人脸识别示例

    vue2+tracking实现PC端的人脸识别示例

    目录 需求 分析 实现思路 使用 tracking.js 最后 总是会有一些奇奇怪怪的需求无法避免.记录一下曾经项目遇到的一个需求. 需求 上传患者真实头像,可以有两种选择,一种是通过常规的文件选择方式上传,第二种方式就是医生可以调用电脑的摄像头拍一张然后上传. 分析 常规的就不用分析了,只分析第二种: 调用本地摄像头 然后可以进行拍照 因为是患者的真实头像,方便辨认,要求要拍到患者脸部 检测到患者脸部,自动截图,医生只需要点击上传即可 实现思路 首先看有不有能识别到患者脸部的前端第三方库,如果

  • vue实现pc端拍照上传功能

    本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF8"> </head> <body> <div id="contentHolder"> <video id="video" width="320" heigh

  • vue中PC端地址跳转移动端的操作方法

    需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面. 这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行:若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可. 里面涉及到了三个知识点:1.路由守卫,2.客户端判断.3.正则提取文字,接下来就分别按照这几点讲解一下,并附上整个

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

随机推荐