• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

vue移动端自适应适配

代码笔记 barben 7个月前 (03-12) 422次浏览 0个评论

这是鼠年来的第一篇文章!
也是刚开始远程上班,强制度假后拿到的第一个任务是完成微信公众号手机端项目的开发!
话不多说,vue走起来!

一、安装lib-flexible插件

lib-flexible】移动端弹性布局适配解决方案。用于设置rem的基准值,插件会自动对html根元素进行font-size的设定,默认会设置成屏幕宽度的十分之一。
打个比方:如果当前屏幕的宽度是1920px,它就会自动给html标签加上font-size: 192px的样式。这个时候,1rem也就等于192px。
1.安装:

npm i -S amfe-flexible

2.在index.html的头部加入手机端适配的meta代码(vue-cli3搭建的项目,该文件在public目录下):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3.引入,以下方法二选一:

// 在main.js文件中直接引入(该文件在src目录下)
import 'amfe-flexible/index.js';

// 或者在index.html文件中加入此标签
<script src="./node_modules/amfe-flexible/index.js"></script>

二、安装postcss-pxtorem插件

postcss-pxtorem】一款postcss插件。用于将单位转化为rem,代码中写入的px单位会根据设置好的基准值,以px大小除以基准值,自动转成rem显示在浏览器上。
打个比方:如果基准值为75(1个rem等于75px),对元素设置宽度为750px,该插件就会自动将这个元素宽度转换成10rem。
1.安装:

npm install postcss-pxtorem --save-dev

2.(适用于vue-cli3)在根目录下找到vue.config.js,写入以下代码。若没有该文件请自行创建:

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(将宽度为750px的设计稿分成10等份,每份也就是75px,也就是1rem=75px)
                        propList: ['*'],
                        // selectorBlackList: [
                        //     "van-",
                        //     "weui"
                        // ],
                        // 以"van-"和"weui"开头的样式不会自动进行rem转换
                    })
                ]
            }
        }
    }
};

执行完了上面的操作之后,你就可以毫不犹豫的写满px了,他们都会在编译时自动转换成rem单位!!!

重点在这,圈起来要考!

你觉得下面的网页哪个好看些?

图2一定是首选!
所以为了让做出来的页面在PC端也能友好一点,
就应该给页面设置一个最大宽度!

// main.js中写入
// REM适配:设置HTML里font-size的大小
function setRem () {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = (htmlWidth / 10) > 75 ? "75px" : htmlWidth / 10 + 'px'; // 设置1rem最大不超过75px
    // htmlDom.style.fontSize = htmlWidth / 10 + 'px'; // 原先1rem等于屏幕宽度除以10
}
setRem(); // 初始化
window.onresize = function () {
    setRem();
}
/* 对最大的父级容器设置样式,一般可能是App.vue文件中的#app */
#app {
    max-width: 750px; /* 插件会自动解析成10rem */
    margin: 0 auto;
}

八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
vue移动端自适应适配 - https://www.barben.cn/code/677.html
喜欢 (8)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址