//在我们的route index.ts文件下 ,写两个路由,进行手机或者pc的判断,进入不同的路由页面
let routes
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
routes = routersM;
} else {
routes = routesP;
}
2.移动端的适配问题
我是用引入的 postcss-pxtorem 这个插件,还是很好用的
跟package.json同级新建postcss.config.cjs,(我不知道为啥写.ts会报错,所以用了cjs)如下:
module.exports = {
'plugins': {
// 'autoprefixer': {
// overrideBrowserslist: [
// 'Android 4.1',
// 'iOS 7.1',
// 'Chrome > 31',
// 'not ie <= 11', //不考虑IE浏览器
// 'ff >= 30', //仅新版本用“ff>=30
// '> 1%',// 全球统计有超过1%的使用率使用“>1%”;
// 'last 2 versions', // 所有主流浏览器最近2个版本
// ],
// grid: true,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid,可以关闭开启)
// },
'postcss-pxtorem': {
rootValue: 16, // 设计稿宽度除以 10, 开头大写的Px 不转换 => height: 100Px, 内联样式不转换,需要 / 75 转成 rem
unitPrecision: 2, // 计算结果保留 6 位小数
selectorBlackList: ['no-'], // 要忽略的选择器并保留为px no-。
propList: ['*'], // 可以从px更改为rem的属性 感叹号开头的不转换
replace: true, // 转换成 rem 以后,不保留原来的 px 单位属性
mediaQuery: true, // 允许在媒体查询中转换px。
minPixelValue: 2, // 设置要替换的最小像素值。
// exclude: /src\/views\/home(\/|$)/, // 排除 node_modules 文件(node_modules 内文件禁止转换)
// exclude: [
// /src\/views\/home(\/|$)/,
// /node_modules/,
// /src\/layout(\/|$)/,
// ],
// exclude:[ /node_modules/]
exclude: /(src\/views\/home|node_modules|src\/layout)(\/|$)/
}
}
}
3.在untils下写入一个设配方案的.ts文件并引入,这样我们的项目里面直接用px就可以自动转换为rem并且可以适配的
const baseSize = 16
// 设置 rem 函数
function setRem() {
//判断横批竖屏的
var screenDirection = window.matchMedia("(orientation: portrait)");
if (screenDirection.matches) {
// 竖屏当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375; // 750
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
} else {
//横屏,横屏给纳粹就给他12px了 不然太大不行
document.documentElement.style.fontSize = 12 + 'px'
}
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
window.addEventListener('DOMContentLoaded', setRem, false)
window.addEventListener('orientationchange', setRem, false)