认识 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 就是占据整个屏幕一半宽度的大小