首页 > 其他分享 >Vue项目中将px转化为rem来实现移动端的适配(亲测有效)

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

时间:2023-03-14 14:46:41浏览次数:61  
标签:resizeBaseFontSize Vue 适配 px rem deviceWidth font

 

最近做项目有个需求: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 )

   比如font-size=50px    需要的padding: 50px   转换之后就是padding: 1rem

 

 

 

 

 

 

完结!撒花✿✿ヽ(°▽°)ノ✿

 

 作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/17214807.html
本博客文章均为作者原创,转载请注明作者和原文链接。

 

标签:resizeBaseFontSize,Vue,适配,px,rem,deviceWidth,font
From: https://www.cnblogs.com/wwyxjjz/p/17214807.html

相关文章

  • less & saas/scss & css 深度选择器语法在 Vue2 & Vue3中的使用
    vue2中原生css>>>.el-card__header saas\scss::v-deep.el-card__headerless/deep/.el-card__header vue3中:deep(){......
  • Vue项目迁移小程序,实操干货分享
    前面发布了很多文章向大家分享前端、小程序相关的知识,最近很多小伙伴说想看实操,这不就安排起来了吗!今天就给大家分享“Vue项目转小程序”的实操干货。首先明确需求:开发......
  • uniapp/vue 生成二维码
     1、在页面中引入js文件constqrCode=require('@/assets/js/weapp-qrcode.js') 2、在页面中增加<canvasclass="canvas"canvas-id="couponQrcode"></canvas>......
  • Vue封装的过度与动画
    1、作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。2、图示  3、写法:(1)准备好样式:元素进入的样式:v-enter:进入的起点v-enter-active:......
  • Day05-设计模式之适配器模式
    设计模式之适配器模式适配器模式介绍适配器模式(AdapterPattern)是将某个类的接口转换成客户端期望的另一个接口表示,主的目的是兼容性,让原本因接口不匹配不能一起工作......
  • #yyds干货盘点#简单的vuex实现
    实现一个vuex插件​​pvuex​​ 初始化:Store声明、install实现,vuex.js:letVue;//定义install方法完成赋值与注册functioninstall(_Vue){Vue=_Vue;Vue.mixin({......
  • #yyds干货盘点#Vuex中的store
    每一个​​Vuex​​应用的核心就是store(仓库)。store基本上就是一个容器,包含着应用中大部分的state(状态)。​​Vuex​​和单纯的全局对象有以下两点不同:​​Vuex​​ 的状态......
  • 【django-vue】七牛云上传视频 搜索接口 支付宝sdk二次封装 下单接口 前端支付页
    目录上节回顾课程详情接口choice字段今日内容1文件存储1.1七牛云上传文件2搜索导航栏2.1Header.vue3搜索接口4搜索页面5支付宝支付介绍5.1支付测试,生成支付链接6......
  • 滴滴前端高频vue面试题(边面边更)
    Vue-router路由模式有几种vue-router有3种路由模式:hash、history、abstract,对应的源码如下所示switch(mode){case'history':this.history=newHTML5H......
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就......