vue项目做屏幕自适应处理方式

目录
  • 起由
  • 总结

起由

项目基于vue-cli搭建，之前项目采用less的功能函数集合媒体查询做的屏幕适配，但是由于JavaScript的对浮点数据处理，这个语言本身的bug问题，总是会出现一些计算误差，这里重新做的项目采用淘宝的lib-flexible的库，来做屏幕自适应处理。

vue-cli搭建完成以后，安装完依赖，项目可以运行以后，我们接着安装felxible库：

npm i lib-flexible -S

npm安装不上去的，可以切换到cnpm上来安装，然后在主文件main.js里面引入：

import  'lib-flexible'

在index.html文件中设置meta标签：

<meta name='viewport' content='width=device-width ， initial-scale=1.0'>

然后在项目中写css时会自动将rem转化为px，需要安装px2rem这个工具，安装：

npm i px2rem-loader -D

在until.js配置文件对loader做相关配置：

如上图，在cssLoader对象下面添加一个px2remLoader对象：

  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
      remUnit : 75
    }
  }

然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader， px2remLoader]

如下图：

const loaders = [cssLoader， px2remLoader];

这样就做完了所以配置，当你做开发时，只需要将设计稿上面量到的尺寸写出来就可以了，比如font-size:18px;就直接写18px就可以

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现大屏页面的屏幕自适应

    本文实例为大家分享了Vue实现大屏页面的屏幕自适应的具体代码,供大家参考,具体内容如下 1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高 } 2. 定义resetScreenSize.js import appConfig from '../config/base' export function pageResize(cal

  • vue开发页面自适应屏幕尺寸的实例代码

    目录 vue开发页面自适应屏幕尺寸 1.概述 2.网页适配屏幕尺寸 2.1.安装插件 2.2.配置插件 vue开发页面自适应屏幕尺寸 1.概述 使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况.下面通过插件将px装换为rem单位适应不同尺寸的屏幕. 2.网页适配屏幕尺寸 2.1.安装插件 lib-flexible插件作用是根据rem调整页面宽高,自适应屏幕尺寸px2rem-loader插件作用是将px单位转换为rem单位,lib-fl

  • Vue屏幕自适应三种实现方法详解

    目录 使用 scale-box 组件 设置设备像素比例(设备像素比) 通过JS设置zoom属性调整缩放比例 使用 scale-box 组件 属性: width宽度 默认1920 height高度 默认1080 bgc背景颜色 默认"transparent" delay自适应缩放防抖延迟时间(ms) 默认100 vue2版本:vue2大屏适配缩放组件(vue2-scale-box - npm) npm install vue2-scale-box 或者 yarn add vue2-sca

  • vue项目做屏幕自适应处理方式

    目录 起由 总结 起由 项目基于vue-cli搭建,之前项目采用less的功能函数集合媒体查询做的屏幕适配,但是由于JavaScript的对浮点数据处理,这个语言本身的bug问题,总是会出现一些计算误差,这里重新做的项目采用淘宝的lib-flexible的库,来做屏幕自适应处理. vue-cli搭建完成以后,安装完依赖,项目可以运行以后,我们接着安装felxible库: npm i lib-flexible -S npm安装不上去的,可以切换到cnpm上来安装,然后在主文件main.js里面引入

  • Springboot项目与vue项目整合打包的实现方式

    Springboot项目与vue项目整合打包的实现方式

    我的环境 * JDK 1.8  * maven 3.6.0  * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

  • vue项目适配屏幕分辨率与屏幕的缩放适配详细教程

    目录 解决方案 全局导入App.vue 刷新页面 笔记本或者显示器 默认设置125%或者150%缩放,导致布局错乱的解决方法 现在很多14寸的笔记本,出厂默认就是150%的显示.导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题 解决方案 vue项目utils下新建devicePixelRatio.js文件 class DevicePixelRatio { constructor() { // this.flag = false; } // 获取系统类型

  • vue项目打包:修改dist文件名方式

    目录 vue项目打包:修改dist文件名 修改vue打包后的默认文件名 解决方案 vue项目打包:修改dist文件名 vue.config.js  // 输出文件目录(默认dist)    outputDir: 'smf', 'use strict' const path = require('path') const defaultSettings = require('./src/settings.js') function resolve(dir) { return path.join(_

  • Electron-vue脚手架改造vue项目的方法

    1. 什么是Electron Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 从开发的角度来看, Electron app

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • vue项目两种方式实现竖向表格的思路分析

    vue项目两种方式实现竖向表格的思路分析

    问题描述 在我们做项目中,常见的是横向表格,但是偶尔的需求,也会做竖向的表格.比如下图这样的竖向表格: 我们看到这样的效果图,第一时间想到的是使用UI框架,改一改搞定.但是饿了么UI并没有直接提供这样的案例,部分同学会想着使用饿了么UI中的el-table的合并行.合并列的方式去实现,其实如果这样去做的话,反而做麻烦了.比如下面的合并行合并列: 类似于这样的效果图,其实并不一定非得使用UI组件,有的时候使用原生的方式去做.反而会更方便.本文介绍两种方式去实现这样的简单的竖向表格.实际场景中可能会

随机推荐