使用scss+js实现移动端自适应布局

对于移动端布局的解决方案有很多，我们可以使用vw/vh，或者em等，但是我们最常用的还是rem布局方案。相比于em，它取值直接对照的是跟元素html字体的大小，方便计算（em参照的是父元素字体的大小）。相比于vw/vh，它的兼容性更加具有优势。

在平常的开发中，我会使用淘宝团队提供的 flexible解决方案，简单易用，兼容性极好。不过今天，我们来自己实现一个移动端布局的解决方案。本例子中的所有代码都是基于vue和scss的，我们假设你已经有这方面的基础。

一、动态设置跟元素html字体的大小

./src/assets/js/htmlFontSize.js

// 定义最大的 fontSize
const MAX_FONT_SIZE = 42

//  监听 html 文档被解析完成的事件
document.addEventListener('DOMContentLoaded', () => {
  // 获取 html 标签
  const html = document.querySelector('html')
  // 获取元素 fontSize 标准，屏幕宽度 / 10
  let fontSize = window.innerWidth / 10
  // 获取的fontSize不允许超出我们定义的最大值
  fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
  // 定义很元素（html）fontSize的大小
  html.style.fontSize = fontSize + 'px'
})

二、使用scss将px转化为rem

./src/assets/css/dimens.scss

// 定义预计跟元素 fontSize -> Iphone 6、6s、7、8
$rootFontSize: 375 / 10;

// 定义像素转化为 rem 的函数
@function px2rem ($px) {
    @return $px / $rootFontSize + rem;
}

三、使用scss的px2rem函数

./src/views/Home.vue

<template>
  <div class="home">
    <p class="test">测试fontSize</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {}
}
</script>
<style lang="scss" scoped>
@import '@css/style.scss';
.test{
  font-size: px2rem(16);
  text-align: center;
}
</style>

四、注意事项

1、记得要在 ./src/main.js中引入htmlFontSize.js文件

import '@js/htmlFontSize.js'

2、记得要配置vue.config.js

const path  = require('path')

module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // mutate config for production...
      } else {
        return {
            resolve: {
                alias: {
                    '@js': path.resolve(__dirname, './src/assets/js'),
                    '@css': path.resolve(__dirname, './src/assets/css'),
                    '@img': path.resolve(__dirname, './src/assets/imgs'),
                    '@c': path.resolve(__dirname, './src/components')
                }
            }
        }
      }
    }
  }

最后编辑于：2020.06.30 10:50:27