利用rem实现页面适配问题

vue + Sass

rem是CSS3中的新单位，与em最大的差别是rem是根据html的fort-size来展现的。

main.js

var viewportWidth = document.documentElement.clientWidth || document.body.clientWidth
document.getElementsByTagName('html')[0].style.fontSize = (viewportWidth > 680 ? 680 : viewportWidth) / 10 + 'px'

*.vue

<style lang="sass">
  //  移动端开发时 比较喜欢用iphone 6p
  @function px2rem($px)
    $rem : 37.5px  //  可根据设计稿自行更改
    @return ($px / $rem) + rem
   // 使用方法
   button
     width: px2rem(200px)
</style>

vue项目中安装Sass

npm install --save-dev sass-loader
npm install --save-dev node-sass