解决移动端适配问题

最新推荐文章于 2023-06-19 15:48:05 发布

陌路人❦

最新推荐文章于 2023-06-19 15:48:05 发布

阅读量226

点赞数 2

分类专栏： vue 文章标签： vue.js html5 前端

本文链接：https://blog.csdn.net/m0_64692707/article/details/126342266

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

解决方案：

一、使用lib-flexible动态设置rem基准值(html标签的字体大小)

二、使用postcss-pxtorem将px转换成rem

解决方案：

lib-flexible用于设置rem基准值
postcss-pxtocss是一款postcss插件，用于将单位转化为rem

一、使用lib-flexible动态设置rem基准值(html标签的字体大小)

1、安装

npm i afme-flexible -D
# yarn add afme-flexible
# -D 是--save-dev的简写

2、在main.js中加载执行该模块

import 'amfe-flexible'

3、测试在浏览器中切换不同的手机设备尺寸，观察html标签font-size的变化

<html lang="" style="font-size: 37.5px;">
  <head>...</head>
  <body style="font-size: 12px;">...</body>
  <div id="__vconsole" style="" data-theme="">...</div>
</html>

二、使用postcss-pxtorem将px转换成rem

1、安装

npm i postcss-pxtorem -D
#yarn add postcss-pxtorem -D

2、在项目的根目录中创建postcss.config.js文件

module.exports = {
    plugins: {
      'autoprefixer': {
        browsers: ['Android >= 4.0', 'iOS >= 7']
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
      }
    }
  }

3、配置完毕，重新启动服务，进行测试px是否转换成rem

.login .btn .login[data-v-ef68022e] {
    width: 5.33333rem;
    margin-top: 1.06667rem;
}

看到px转换成rem适配就完成了

陌路人❦

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决移动端适配问题

解决移动端适配问题
复制链接

扫一扫

专栏目录