vue3.0+ts 移动端+pc端共同在一个项目里面并且对移动端进行适配

最新推荐文章于 2024-07-22 10:34:10 发布

zy991315

最新推荐文章于 2024-07-22 10:34:10 发布

阅读量814

点赞数 1

文章标签： vue.js javascript typescript

本文链接：https://blog.csdn.net/zy991315/article/details/131509841

版权

//在我们的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)