详解vue-cli中使用rem,vue自适应

1.rem.js内容

  ! function(n) {
	            var e = n.document,
		    t = e.documentElement,
		    i = 720,
		    d = i / 100,
		    o = "orientationchange" in n ? "orientationchange" : "resize",
		    a = function() {
			    var n = t.clientWidth || 320;
			    n > 720 && (n = 720);
			    t.style.fontSize = n / d + "px"
		    };
	            e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))

            }(window);

2.项目目录

3.在main.js 中引入

4.直接使用

以上所述是小编给大家介绍的vue-cli使用rem,vue自适应详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • 基于vue-cli配置lib-flexible + rem实现移动端自适应

    基于vue-cli配置lib-flexible + rem实现移动端自适应

    安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 bu

  • Js动态设置rem来实现移动端字体的自适应代码

    下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

  • Vue CLI中模式与环境变量的深入详解

    Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • vue项目中使用rem,在入口文件添加内容操作

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: <script> window.onload = function () { var setRem = function () { // UI设计稿的宽度 var uiWidth = 1200; // 移动端屏幕宽度 var winWidth = document.documentElement.clientWidth; // 比率 var rate = winWidth / uiWidth; //

  • vue项目中使用rem替换px的实现示例

    目录 工具 安装插件 在项目根目录下添加.postcssrc.js文件 index.html 关于 移动端页面适配,rem和vw适配方案 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿(一般UI设计师给的都是750的设计稿): 工具 vue-cli:使用脚手架来搭建vue前端项目 postcss:就是postcss用js插件帮你转换css样式的一个工具.比如,这里的把你的文件里面16px替换成1rem(根

  • vue cli中env的使用指南

    目录 前言 简介-官方 示例配置 前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 develo

  • 手把手教你如何在vue项目中使用rem布局

    目录 如何在vue项目中使用rem布局 方法一:使用lib-flexible 1. 安装包 2. 引入文件 3. 根据需要设置rem 4.使用rem 方法二:使用postcss-pxtorem 1. 安装包 2. 创建rem.js文件 3. 新建 .postcssrc.js 4. 在main.js中引入 5. 设置body的font-size 6. 可参照流程图 总结 如何在vue项目中使用rem布局 场景: 在我们开发移动端项目中,实现手机页面布局,需要使用rem布局,那么该如何使用呢? 本文

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解CSS开发过程中的20个快速提升技巧

    详解CSS开发过程中的20个快速提升技巧

    1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性. 大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin.padding改变浏览器默认的盒模型. *{box-sizing:border-box;margin:0;padding:0} 使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它. 2.继承

  • 详解CSS样式中的!important、*、_符号

    详解CSS样式中的!important、*、_符号

    详解CSS样式中的!important.*._符号 !important.*._其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的. 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv

  • 详解PostgreSQL 语法中关键字的添加

    详解PostgreSQL 语法中关键字的添加 当PostgreSQL的后台进程Postgres接收到查询语句后,首先将其传递给查询分析模块,进行词法.语法和语义分析. 记录下在parser语法解析模块添加关键字. 几个核心文件简介 源文件 说明 gram.y 定义语法结构,bison编译后生成gram.y和gram.h scan.l 定义词法结构,flex编译后生成scan.c kwlist.h 关键字列表,需要按序排列 check_keywords.pl linux下会调用其进行关键字检查(顺

随机推荐