最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

vue的PC端和移动端分辨率适配

互联网 admin 2浏览 0评论

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进行缩放字体(我没试过、大家可以尝试解决)

五、思路地址

/?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.highlightwordscore&spm=1001.2101.3001.4242.1

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进行缩放字体(我没试过、大家可以尝试解决)

五、思路地址

/?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.highlightwordscore&spm=1001.2101.3001.4242.1

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论