vue开发页面自适应_vue-cli 【flexible】屏幕字体自适应布局及配置

0.前言：
很多前端小伙伴在写页面尤其是移动端页面的时候，要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应【注：非响应式】，那么，在vue-cli脚手架中应该如何去实现呢？
1.安装flexible库 :
//在项目库下运行： npm i lib-flexible --save-dev
2.项目入口文件main.js中引入lib-flexible:
//main.js中： import 'lib-flexible'
3.在项目index.html的head中配置meta：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
4.安装px2rem-loader：
//在项目库下运行 npm install px2rem-loader --save-dev
5.配置px2rem编译器：
在build/utils.js中，将px2rem-loader添加到cssLoaders中：
//自适应字体配置 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 //设计稿的宽度除以 10，现阶段一般设计稿的宽度都为750px。如果基于iPhone5设计则为32.0(320 / 10 = 32) } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] /** *其余的不用改 */ }
6.启动项目：
npm run dev
后语：
启动项目之后会惊讶的发现已经完美解决了，即使在PC端也是适用的哦~
想要了解更多关于px2rem的想伙伴可以戳下方飞机票去官方看介绍：
点击飞机票：px2rem
作者：流眸Tel
链接：https://www.jianshu.com/p/37f09e2a7b11
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

vue开发页面自适应_vue-cli 【flexible】屏幕字体自适应布局及配置相关推荐

vue热更新失效_vue cli@3项目style标签里面热更新失效的问题
1.首先献上一片webpack的默认配置文档 const path = require('path') module.exports = { publicPath: './', // 基本路径 out ...
vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
vue里面使用echarts实现根据浏览器屏幕大小自适应
1- 安装 echarts 依赖 npm install echarts -S 2- 创建图表全局引入在main.js 中写 import echarts from 'echarts' Vue.pr ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
前端vue开发页面按钮字体颜色白色或文本框不存在谷歌
第一种情况:使用elementui按钮组件结果:里面字体白色: 第二种情况:添加了input输入框结果不显示解决方法:查看右上角是否有插件icon 如果有的话把正在执行的插件(一般是流氓广告)移除 ...
vue 离开页面时间_vue 前端页面无操作时，系统退出登录的定时器设计
一.背景我们平时做系统为了保证用户操作数据的安全性,很多时候当用户长时间不再操作电脑的时候,应该给用户自动退出系统,这样可以防止有别人使用电脑操作上一个用户的数据. 二.设计想法监听鼠标移动以及键盘 ...
原声html中怎么加载vue文件,HTML文件引入Vue开发
HTML文件引入Vue开发页面标题 {{text}} {{item.text}} 点击事件 @click {{text}} 添加文本使用两个大括号{{文本}} img标签中src前面得加冒号 new ...
vue @input带参数_Vue 全家桶开发的一些小技巧和注意事项
前言用 vue 全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家.以下内容基于最新版的 vue + vuex + vue-router + axios + ...

vue开发页面自适应_vue-cli 【flexible】屏幕字体自适应布局及配置

vue开发页面自适应_vue-cli 【flexible】屏幕字体自适应布局及配置相关推荐

最新文章

热门文章