Vue pc端适配不同分辨率屏幕

前言

pc端一般是不需要适配的，因为现在的显示器分辨率一般都是1920*1080（设计图也是），一般不用管。
但是有一种情况你的设计图是1920*1080，开发完了。发现别人设备因为某些原因不是这个分辨率，就要适配
需求是：使用不同分辨率设备，注意是高度可能会出现滚动条。只是临时解决方案

实际操作

1、安装 postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2、在根目录src中新建utils目录下新建rem.js等比适配文件可直接复制以下代码

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {// 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改const scale = document.documentElement.clientWidth / 1920// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

3.在main.js中引入适配文件

import './utils/rem.js'

4、到vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')// 配置基本大小
const postcss = px2rem({// 基准大小 baseSize，需要和rem.js中相同remUnit: 16
})

module.exports = {
// chainWebpack (config) {}
// 在这个对象下面直接写
css: {loaderOptions: {postcss: {plugins: [postcss]}}}
}

注意：最好是设计图就设计的和要展示设备的分辨率一样，不然改成本大，这样适配宽度没有问题，行内和写死的单位可能要手动改，高度可能会出问题，高度会出现滚动条，不是撑满的。但是可以临时救一下急。

总结：

经过这一趟流程下来相信你也对 Vue pc端适配不同分辨率屏幕有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕

Vue pc端适配不同分辨率屏幕相关推荐

VUE pc端适配移动端H5
需要安装两个插件 postcss-pxtorem 和 lib-flexible 直接安装postcss-pxtorem插件,报错" Error: PostCSS plugin postcss ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
html自动适应屏幕分辨率,css如何设置适配不同分辨率屏幕？
css如何设置适配不同分辨率屏幕?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置适配不同分辨率屏幕? 在使用div+css网页布局时,可以 ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
关于UnityPC端打包参数设置及发布PC端时固定分辨率
UnityPC端打包参数设置主要设置都在PlayerSettings里面 Company Name:设置公司名称 Product Name:设置项目名称,这个获取窗体句柄的时候用的到 Default ...
flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...

Vue pc端适配不同分辨率屏幕

前言

实际操作

Vue pc端适配不同分辨率屏幕相关推荐

最新文章

热门文章