前端开发中,根据UI提供的设计稿通常也需要根据不同分辨率自适应比例开发
在拿到UI设计稿时,UI通常时根据某一个分辨率(例如:1920*1080)设计的设计稿,但是在开发过程中,需要适配不同浏览器,固定的1920分辨率下使用px像素开发,就会存在一些形变的问题;
一、提出问题
例如在1920分辨率中存在内边距padding: 40px;但是在其他分辨率中(720),内边距padding: 40px这内边距就会显的很宽,需要根据比例将 1920下40px 缩小至720下15px。
二、解决思路
通过移动端rem思维来解决办法
在vue中引入插件:postcss-pxtorem、px2rem-loader来解决问题
三、具体开发代码
1、添加组件
-- 添加插件
-- npm
npm i postcss-pxtorem px2rem-loader --save
-- yarn
yarn add postcss-pxtorem px2rem-loader -D
2、postcss.config.js配置
如果项目中不存在postcss.config.js文件,则在vue.config.js同目录下创建一个文件,代码如下
const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
module.exports = {
plugins: [
autoprefixer(),
px2rem({
rootValue: 192, //换算基数,把根标签的font-size规定为1rem为100px,在设计稿上量出多少px直接在代码中写多少
unitPrecision: 5, //保留rem小数点多少位
// propList: ['*', '!border', '!font-size']
propList: ['*'], // 存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换
// selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器
// mediaQuery: false,//(布尔值)媒体查询( @media screen 之类的)中不生效
// minPixelValue: 12,///设置要替换的最小像素值,px小于12的不会被转换
// propBlackList: ['font-size'], //黑名单
})
],
};
4、rem.js
作用:切换页面时动态更新html(根标签)的font-size
const baseSize = 192
// 设置 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()
}
在main.js中引入rem.js
import './rem.js' //根据自己创建文件目录引入