vue使用px2rem
来源:互联网 发布:数据库服务器cpu 要求 编辑:程序博客网 时间:2024/05/19 00:42
做移动端时,适配 是必须的。使用rem单位,可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。
px2rem 地址:https://www.npmjs.com/package/px2rem
使用方式:
1、安装 npm install px2rem-loader 或者 cnpm install px2rem-loader
2、vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在这里添加 。
var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 64//设计稿宽度/10 } }; // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { var loaders = [cssLoader, px2remLoader];//添加px2rem 插件 if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
3、安装配置结束后,重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了。
4、使用时,为了防止字体大小fontSize出现奇数单位,可将单位px不转为rem 。在fontSize>30px时才转成rem 。
font-size:26px /* no*/ px不转成rem
font-size:26px px转成rem
本文只是对vue中使用px2rem方式的说明,想要研究原理的请移步到官网或github 。
阅读全文
0 0
- vue使用px2rem
- vue-cli使用px2rem
- vue+webpack项目中px2rem的例子
- vue使用
- 使用vue闪现vue代码
- vue中使用vue-router
- vue框架使用积累
- vue.js的使用
- vue 项目使用经验
- Vue路由的使用
- VUE的prop使用
- vue-resource插件使用
- vue-axios使用
- vue component 组件使用
- vue过滤器使用
- Vue 使用nprogress
- Vue-使用JavaScript表达式
- vue-cli 使用入门
- Android标题栏ToolBar详解
- Leetcode问题解答:4. Median of Two Sorted Arrays
- 1.TensorFlow初识 TF实现线性回归模型
- JAVA获取当前系统时间System.currentTimeMillis()
- Oracle存储过程中CRUD的使用
- vue使用px2rem
- 第二周项目(2)-程序的多文件组织
- ssh keys管理工具
- MenuItemFont字体设置bug的解决方法
- java-captcha实现验证码
- leetcode 105. Construct Binary Tree from Preorder and Inorder Traversal
- 搭建开发山寨币交易平台过程中用得到区块链签名认证技术
- Linux shell脚本读取用户输入的参数
- 面向对象程序设计上机练习三(有默认参数的函数)