vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配
注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题、现已不被推荐(因为目前比较主流的适配方案是使用vw和vh的方式进行适配)、lib-flexble是根据屏幕的大小自动分配对应的font-size大小,px2rem是将项目中所书写的所有px单位转换成rem单位。 故当前所使用的适配方案其根本用的还是rem实现的适配
一、通用步骤
1:下载lib-flexble和px2rem的npm依赖包
npm i lib-flexible -S
npm i px2rem-loader -D
2:需要在main.js入口文件中载入lib-flexble
//main.js
import "lib-flexble"
二、vue-cli2.x
1:找到build/utils.js(build文件夹和src文件夹同级)
2:在utils.js中增加px2remLoader函数(注:px2remLoader函数中的options对象中的remUnit的key值就是你需要根据设计图规划大小的比例、如果你是移动端===>屏幕宽度大致的750px,需要设置为75,如果是pc端 ====>屏幕宽度应该是1920,需要设置为192。目的就是1rem等于分辨率宽度的1/10,便于开发计算)
//utils.js
const cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap}}const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 192}}//...
3:在utils.js文件中找到generateLoaders函数并替换其中loaders项
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
4:重新启动前端项目即可
三、vue-cli3.x
1:因为vue-cli3脚手架没有build文件夹,所以唯一不同的地方就是我们需要在package.json中定义规则(其余步骤一致)
下面的rootValue作用等同cli2上方定义规则中的remUnit
"postcss": {"plugins": {"autoprefixer": {},"postcss-pxtorem": {"rootValue": 192, "propList":["*"] }}}
2:重启前端服务即可生效
四、问题
1:px2rem插件只能将vue文件中的style中的px转换成rem、至于script和在元素上定义的px单位并不能有效转换成rem
2:如果开发中有一些单位我们不需要将其转换成rem单位、我们只需在对应的样式后面加上、/* no */即可
3:(PC端注意:)执行上述操作后、有人可能觉得适配了但是又未完全适配、这是因为lib-flexble它设定了最大适配值
在nodemodule中找到flexble.js文件(在lib-flexble的文件依赖文件夹中)找到refreshRem函数
function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) { //获取屏幕宽度width = 540 * dpr;//当屏幕宽度大于540的是时候、将宽度些四成540、我们适配pc端的时候不让他写死宽度、直接写成width(当前的宽度即可)}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
4:因为有的浏览器会规定最小字号、所以会存在等比缩放的时候、字号大小并没有等比缩放、从而会导致界面样式出现问题,可以尝试使用transfrom:scal进行缩放字体(我没试过、大家可以尝试解决)
五、思路地址
https://blog.csdn.net/weixin_41257563/article/details/97266234/?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.highlightwordscore&spm=1001.2101.3001.4242.1
vue的PC端和移动端分辨率适配相关推荐
- vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
- 基于vue的UI框架集锦(移动端+pc端)
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...
- 基于SpringBoot+VUE(PC端+小程序端)的智能在线考试系统毕业设计
作者主页:编程千纸鹤 作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路 关注作者有好处 ...
- Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端 常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
- pc端不同分辨率适配
1.以1920* 1080的设计稿为例,实现PC端不同分辨率适配 2.安装依赖 npm install --save lib-flexible 或者 yarn add lib-flexibl ...
- vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音 并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音 并上传 自己写blog只是为了下次方便使用 过程确实很烦 ,自己摸索加各大网站cv查看 可以直接使用 1.调用摄像头拍照 录屏 首先是npm ...
- ** PC端完美兼容各种分辨率的简便方法 **
PC端完美兼容各种分辨率的简便方法 小程序.前端交流群:609690978 PS:此方法需使用到less或者scss的@变量来支持 以设计图 1920 宽度为例: css中存在一种叫vw的单位,是针对 ...
- PC端页面自适应不同分辨率的方法
以1920* 1080的设计稿为例,实现PC端不同分辨率适配 <script TYPE="text/javascript"> var docEl = document. ...
- vue项目区分打开的是pc端还是移动端
我是一个vue 项目 pc一套代码 移动端一套代码 1.建立两个文件夹 一个mobile 一个pc,在router里配置项目路径 2.新建一个js文件夹 下列代码放入 假设名字叫util export ...
最新文章
- 移动广告平台到底哪个好?哪个能赚的米米多?
- PDF文件修改后,保存时出现:文档无法保存。读取文档时出现问题(135)
- C# 中串口通信 serialport1.DataReceived 函数无法触发或者出发延时等等问题解决方法
- LightOJ-1028 Trailing Zeroes (I)---因子数目
- shell 解析 json
- 2016级算法第一次练习赛-E.AlvinZH的儿时回忆——蛙声一片
- mysql创建读写账号_mysql创建读写账号及服务相关优化配置
- python求球的表面积_892. 三维形体的表面积(Python)
- 验证手机号码归属地_最新确认:手机号码归属地不能取消
- java---Listener Filter知识点学习
- 23种设计模式之中介者模式
- Loadrunner进行HTTPS协议性能测试
- android图片缩小和放大Matrix
- tomcat classpath两个路径_solr安装-tomcat+solrCloud构建稳健solr集群
- 星恒发布“超锂S7” 新品 采用第7代锰系多元复合锂技术打造
- linux thread 状态检查,Linux下查看进程的线程 - pstree
- php访问url的四种方式
- spark java jar 依赖_spark提交依赖jar包的解决方法
- 爬取淘宝买家秀,sign值的生成
- android自定义listview 显示数组,android TextView控件如何显示Listview数组内容到一个Textview控件上?...
热门文章
- 阿里面试之Hr面,这个套路把我坑惨了......
- windows2012装sql 2000 sql 2005 vs2005的解决办法
- MES智能工厂信息化系统
- qt之QSqlQuery类执行SQL语句
- noip初赛复习(全)(转)
- ext2与ext3的区别
- 视频教程-新React+VUE前端教程入门到精通-Vue
- 低代码平台开发 python_【低筋面粉】低筋面粉的功效_低筋面粉图片_食材百科_美食杰...
- 输入你的密码来连接到_查看电脑已连接的WIFI密码
- windows 2008虚拟机的安装方法