导航栏字体和图片根据手机屏幕大小而变化【案例】

<template>
  <div>
    <div class="header">
      <ul class="header-content">
        <li class="header-item">推荐</li>
        <li class="header-item">新闻</li>
        <li class="header-item">娱乐</li>
        <li class="header-item">体育</li>
        <li class="header-item">图片</li>
        <li class="header-item">财经</li>
      </ul>
    </div>
    <div class="banner-content">
      <img class="banner" src="../assets/photo/shanghai.jpg">
      <p class="banner-title">2017网易时尚跨界盛典</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  mounted() {
    //获取屏幕宽度(viewport)
    let htmlWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    //获取html的dom
    let htmlDom = document.getElementsByTagName("html")[0];
    //设置html的fontsize
    htmlDom.style.fontSize = htmlWidth / 10 + "px";
    //屏幕变化时html字体变化
    window.addEventListener("resize", e => {
      let htmlWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      htmlDom.style.fontSize = htmlWidth / 10 + "px";
    });
  }
};
</script>
<style lang="scss" scoped>
@function px2rem($px) {
  $rem: 37.5px;
  @return ($px/$rem) + rem;
}
.header {
  height: px2rem(40px);
  width: 100%;
  background: red;
  padding-left: px2rem(23px);
  .header-item {
    float: left;
    color: #ffcdce;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    line-height: px2rem(40px);
    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(17px);
    }
  }
}
.banner-content {
  position: relative;
  .banner {
    display: block;
    width: 100%;
    height: px2rem(190px);
  }
  .banner-title {
    position: absolute;
    left: px2rem(15px);
    bottom: px2rem(15px);
    font-style: px2rem(19px);
    color: #fff;
  }
}
</style>