vue中用rem自适应

1.在 的App.vue中写如下代码:

<template>

  <div id="app">

  <Header></Header>

  <router-view></router-view>


  </div>

</template>

<script>

import Header from '@/components/Header.vue'

export default {

//注册组件

  components: {

Header,

  },

  created(){

  this.resetWidth()

  },

  methods:{

resetWidth(){

let baseWidth =  document.documentElement.clientWidth||document.body.clientWidth;

document.documentElement.style.fontSize=baseWidth*100/375 +"px";

console.log(baseWidth);

}

};

</script>

<style>

</style>

2.在index.html文件中:

html{font-size: 100px;}

body{font-size: 16px;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 7,885评论 4 45
  • 2017.2.3 宜兰 晴 步数16098 预计行程 几米广场—宜兰设治纪念馆—籣阳博物馆—罗东夜市
    长乐未央Emma阅读 1,300评论 0 0
  • 跟你在一起我可以肆无忌惮的做我自己, 我可以在大马路上啃鸭叉啃鸭脖子, 我可以端着盒臭豆腐晃晃悠悠走来走去; 我可...
    戴十三阅读 4,318评论 0 3
  • 她总能轻而易举的把我带走,带到她的世界。自从初衷开始读她的书,从此以后三毛的书,就成了我书架上的另一种书。 从她的...
    velynneji阅读 4,438评论 0 0
  • 1.calc() 函数用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: cal...
    kismetajun阅读 3,405评论 0 8