vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible
一、项目中安装lib-flexible
$ npm install lib-flexible --save
二、在项目的入口js文件中引入lib-flexible
import 'lib-flexible'
通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem
注意:
1.检查一下html文件的head中,如果有 meta name="viewport"标签,需要将他注释掉,因为如果有这个标签的话,lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。
2.因为html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的最大宽度是10rem。
3.如果每次从设计稿量出来的尺寸都手动去计算一下rem,就会导致我们效率比较慢,还有可能会计算错误,所以我们可以使用px2rem-loader自动将css中的px转成rem
第二部分:使用px2rem-loader自动将css中的px转换成rem
一、安装px2rem-loader
$ npm install px2rem-loader --save-dev
二、配置px2rem-loader
1.打开build/utils.js文件,找到exports.cssLoaders方法,在里面添加如下代码
- const px2remLoader = {
- loader: 'px2rem-loader',
- options: {
- remUint: 75
- }
- }
2.修改generateLoaders方法中的loaders
- // 注释掉这一行
- // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
- // 修改为
- const loaders = [cssLoader, px2remLoader]
- if (options.usePostCSS) {
- loaders.push(postcssLoader)
- }
然后重新npm run dev,打开控制台可以看到代码中的px已经被转成了rem
注意:
1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem
2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了
vue项目中使用lib-flexible解决移动端适配相关推荐
- Vue项目中你是如何解决跨域的呢?
Vue项目中你是如何解决跨域的呢? 一.跨域是什么 跨域本质是浏览器基于同源策略的一种安全手段 同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能 所谓同源( ...
- Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题 需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
- 关于Vue项目中tff报错解决办法
在webpack.config.js中的模块配置中加如下的配置规则: {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader&qu ...
- vue项目中如何用代理解决跨域,什么是代理
1.为什么要用代理 举一个简单的例子,一般情况下一个公司里面最多的就是ip不同,比方说前端ip是192.168.0.7,后端ip是192.168.0.8,由于ip不同是不能访问后端资源的,不仅仅是ip ...
- vue项目通过puppeteer做SEO,可以使用Puppeteer在Vue项目中进行SEO,通过服务端渲染获取渲染后的HTML内容,以便搜索引擎爬虫能够正确地索引您的网页内容。
正在使用的项目 https://manefuwu.com/ 下载vue-seo-puppeteer项目:https://github.com/lovelin0523/vue-seo-puppeteer ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题 参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
- 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
最新文章
- Wireshark网络抓包(三)——网络协议
- SAP 物料在启用序列号管理或者不启用序列号管理之间快速切换?
- 修改上传附件大小限制方法
- windows hider
- 【Vegas原创】SQL case when 用法
- 看到好东西, 赶紧收藏一下
- AI:你们是不是在等一顶红帽子?
- html网页如何获取后台数据库的数据(html + ajax + php + mysql)
- 一个程序详细研究DataReader(转)
- LeetCode 673. 最长递增子序列的个数(DP)
- 支付宝jsapi_使用小程序Serverless开发支付宝小程序
- opencv 像素操作
- 西门子1200/1500系列PLC与安川CP-317系列PLC网口通讯
- mate7 android 6 root权限管理,华为Mate7 Root权限怎么获取 华为Mate7 Root权限获取教程【详解】...
- 前K个高频元素[小根堆和大根堆的使用]
- 解决win7系统重启后ip丢失问题,即每次电脑重启都要重新设置ip地址,重启后ip地址没了
- 网页JS简繁体字转换
- 网络安全态势感知研究综述
- Android 3D立体旋转效果实现
- IDEA 没有 .iml 文件