Vue项目中将px转化为rem来实现移动端的适配（亲测有效）

微微一笑绝绝子

已于 2023-03-15 09:06:55 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 Vue 移动端Rem 文章标签： vue.js javascript 前端 ecmascript 前端框架

于 2023-03-14 14:32:00 首次发布

本文链接：https://blog.csdn.net/wwyxjjz/article/details/129543987

本文介绍了在Vue项目中如何进行px到rem的转换，以实现移动端的页面适配。通过在index.html中添加公共方法，以及在移动端页面中应用转换规则，轻松解决跨平台适配问题。特别提示，避免使用行内样式，并在模拟器中设置为iPhone X模式，根据html根元素的font-size调整单位。例如，当font-size为50px时，50px的padding转换为1rem。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目有个需求：vue pc端需要嵌套移动端页面涉及到将px转化为rem来实现移动端的适配问题，两步解决！绝绝子教你哈

1.index.html页面放入：px转rem公共的方法

(function () {
      function resizeBaseFontSize() {
        var rootHtml = document.documentElement,
          deviceWidth = rootHtml.clientWidth;
        if (deviceWidth > 640) {
          deviceWidth = 640;
        }
        rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
      }
      resizeBaseFontSize();
      window.addEventListener("resize", resizeBaseFontSize, false);
      window.addEventListener("orientationchange", resizeBaseFontSize, false);
    })();

2.嵌入的移动端页面 px转换rem写法

注意：

①最好不要写行内样式

②调成iPhone X模式

③看html根标签font-size的值(换算：**px / font-size的值 = ** rem )