移动端/PC端适配实践

移动端/PC端适配实践

移动端适配
主要是想在不同的移动设备上展示其所匹配的margin/padding/font-size大小，适配时有以下几个点是想满足的：

（1）不需要换算，也不想计算转换系数

（2）有些属性或者类选择器不想进行转换

（3）css代码要足够简洁，只希望看到一种单位，那就是px

目前看查询使用最多的适配方案有：

使用amfe-flexible/lib-flexible和postcss-pxtorem

postcss-px-to-viewport

第一种方案amfe-flexible/lib-flexible和postcss-pxtorem，是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。

但是github地址中可以看到，他建议我们开始使用viewport

所以第二种postcss-px-to-viewport更适合使用，postcss-px-to-viewport将px转换成视口单位vw。

以下是我的配置(vue2,vue3直接在vite.config中进行配置)（.postcssrc.js）：

重要的是你一定要清楚，设计稿的宽度，并把它设置为viewportWidth。我们的项目中只有移动端需要匹配此规则，所以在exclude项中，我们设置忽略文件为除过mobile目录下的文件。

module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ["*"], // 指定转换的css属性的单位，代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
// selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
// exclude:  [/mobile/],// 设置忽略文件，用正则做目录名匹配这个正则表达式怎么取反
exclude: /^((?!(src(|/)views(|/)mobile)).)$/, // 设置忽略文件，用正则做目录名匹配，当前只让mobile文件夹下的页面】做适配
landscape: false // 是否处理横屏情况
}
}
};

还有很重要的一点是：需要兼容第三方库

我们使用的vant-ui，他的viewport适配方案，是按照设计稿375px去做的。如果我们UI给的设计稿不是375，那需要加上下面内容

const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;

PC适配
需求：比设计图小的尺寸出现滚动条，其余尺寸按一定比例缩放
方案：
环境：vue3.2+vite3.2

插件：postcss-pxtorem5.1，将px转换为rem

配置

vite.config.js

import postcsspxtorem from "postcss-pxtorem";

css: {
postcss: {
plugins: [
postcsspxtorem({
rootValue: 12, //浏览器最小字体
propList: [""], //是一个存储哪些将被转换的属性列表，这里设置为['']全部，假设需要仅对边框进行设置，可以写['', '!border']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'],  //是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
replace: true,
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 0, //px小于多少不转换
})
]
}
},

rem.js设置缩放

let rootWidth = 1440; //设计图宽度
let rootSize = 12;  //字体大小
getScreenWidth();

function setRem(defaultWidth) {
let screenWidth = document.documentElement.clientWidth;
defaultWidth ? screenWidth = defaultWidth : screenWidth;
const baseSize = rootSize;
const scale = screenWidth / rootWidth;
let fontSize = baseSize * Math.min(scale, 2) > rootSize ? baseSize * Math.min(scale, 2) : rootSize;
document.documentElement.style.fontSize = fontSize + "px";
}

//监听屏幕变化
window.addEventListener("resize", function () {
getScreenWidth();
});

function getScreenWidth(){
let screenWidth = document.documentElement.clientWidth;
screenWidth >= rootWidth ? setRem() : setRem(rootWidth);
}

参考https://blog.csdn.net/sinat_17775997/article/details/127101451