在vue中使用flexible---移动端适配
在vue中使用flexible—移动端适配
配置 flexible
安装 lib-flexible
在命令行中运行如下安装:
npm i lib-flexible --save
引入 lib-flexible
在项目入口文件 main.js 里 引入 lib-flexible
// main.js
import 'lib-flexible'
添加 meta 标签
在项目根目录的 index.html 中添加如下 meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
px 转 rem
实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具,它有 webpack 的 loader:px2rem-loader
安装 px2rem-loader
在命令行中运行如下安装:
npm i px2rem-loader --save-dev
配置 px2rem-loade
在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。
我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 750px。(常用的是75和37.5)
const px2remLoader = {loader: 'px2rem-loader',
options: {remUnit: 75
}
}
并放进 loaders 数组中
修改配置后需要重启,然后我们在组件中写单位直接写 px,设计稿量多少就可以写多少了.
如果文章对你有帮助,麻烦点个赞,谢谢~
在vue中使用flexible---移动端适配相关推荐
- vue中使用flexible.js并配合px2rem-loader实现移动端布局
适配移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install li ...
- vue中文字转语言,适配web移动端
在PC端文字转语音可以使用HTML5中的API,SpeechSynthesisUtterance const synth = window.speechSynthesis; const msg = n ...
- vue x 兼容iphone_H5移动端适配IphoneX等机型
先来看下iPhone X机型的样子 上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示 h5做成的移动端页面,常见布局为头部+躯干+ ...
- vue x 兼容iphone_Html5移动端适配IphoneX等机型的方法
先来看下iPhone X机型的样子 上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示 h5做成的移动端页面,常见布局为头部+躯干+ ...
- 在vue中使用flexible响应式布局——默认html字体大小(font-size)是54px的问题
rem响应式布局中,最著名的就是淘宝出品的flexible,马上到新公司,听经理说会有大屏幕展示,所以周末研究一下. 先使用命令创建一个vue项目 vue init webpack 项目名称 安装fl ...
- vue中使用flexible
1.安装 npm i -s lib-flexible 2.main.js中引入 import "lib-flexible/flexible.js"; 3.node_modules下 ...
- vue项目配置rem移动端适配
一.项目介绍 脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件 下载插件 npm i ...
- vue中html的fontsize的适配
// 定义最大的 fontSize const MAX_FONT_SIZE = 42 // 监听 HTML 文档被解析完成的事件 document.addEventListener('DOMConte ...
- 关于vue中iframe嵌套页面的适配(大屏可视化)
this.$nextTick(() => { const iframe = this.$refs.iframeWarp //获取dom const iframed = iframe[0] ifr ...
最新文章
- cf 1062d 思维 欧拉筛变形
- opencv学习笔记11:图像滤波(均值,方框,高斯,中值)
- HDU 1536 求解SG函数
- hdu 1176 馅饼
- 计算机应用基础的文档,计算机应用基础
- 链表的逆置,归并,拆分以及其他函数集合
- JS 快速找到数组索引
- python按键退出循环_python – 按退出键退出循环
- Java I/O系统之处理流类型
- mpvue小程序《校友足迹》成长记(一)
- 华为云学院-人人学loT学习笔记- 第三章 窄带无线,宽带互联
- 搜题接口API使用 授权使用
- JVM-由常量池 运行时常量池 String intern方法想到的(三)之String内存模型
- A Busiest Computing Nodes(线段树+优先队列)
- 发布轻开平台移动App服务器
- 解决react项目启动报错:error Couldn't find a package.json
- Mac下载软件的网站
- Holt_Winters三次平滑指数实现
- 使用Python爬取豆瓣电影 Top 250
- 一分钟学会手工注册BHO