认识 vh 和 vw 单位

1. 页面 html 结构

  <header>
    <h1>欢迎来到米修在线</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi doloremque ad dolore, nam ex et. Accusamus nihil natus repellendus, cum ipsa iusto in nesciunt, dignissimos nostrum odit voluptatibus officiis veritatis!</p>
    <a href="#" class="btn">关于我们</a>
  </header>
  <section>
    <h3>关于铄洋在线</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, qui laboriosam, impedit nihil deserunt dolor assumenda dignissimos fugiat, beatae eveniet praesentium neque omnis consequatur laborum molestiae illum accusantium nesciunt harum?</p>
  </section>

2. css 样式

*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    header {
      background: #444 url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover;
      color: #ffffff;
      height: 100vh;
      /* width: 100vw; */
      text-align: center;
      padding: 2rem;
      padding-top: 15rem;
    }
    header h1 {
      font-size: 3rem;
    }
    header p {
      margin: 1rem 0;
    }
    .btn {
      display: inline-block;
      text-decoration: none;
      color: #333;
      background: #f4f4f4;
      padding: 01.7rem 2rem;
    }
    section {
      padding: 2rem;
    }
    @media (max-height: 400px) {
      header {
        padding-top: 5rem;
      }
    }

3. vh 和 vw 的使用场景

vh

vh是控制高度的,根据浏览器的大小控制100~1的百分比

height: 100vh 就是占据整个屏幕高度的大小

height: 50vh 就是占据整个屏幕一半高度的大小

vw

vw是控制宽度的,根据浏览器的大小控制100~1的百分比

wight: 100vh 就是占据整个屏幕宽度的大小

wight: 50vh 就是占据整个屏幕一半宽度的大小