如何使用 CSS Viewport 单位 vh 来创建适配手机屏幕的网页布局
手机设备的普及和使用越来越广泛，越来越多的网页需要进行手机屏幕的适配。为了解决这个问题，CSS3引入了一个新的单位——Viewport单位，其中包括vh (viewport height)。在这篇文章中，我们将探讨如何使用vh单位来创建适配手机屏幕的网页布局，并提供具体的代码示例。
一、Viewport 单位 vh 简介
Viewport 是指网页在浏览器窗口中显示内容的区域，vh单位是基于Viewport高度的单位。vh的值是相对于Viewport高度的百分比，1vh等于1%的Viewport高度。例如，如果Viewport的高度是800像素，那么1vh就等于8像素。
二、创建适配手机屏幕的网页布局
使用vh单位可以方便地创建适配手机屏幕的网页布局，下面将介绍几种常见的布局方式。
立即学习“前端免费学习笔记（深入）”；
- 全屏布局
全屏布局是指网页内容展示在整个手机屏幕上，不留白边。可以通过设置html和body元素的高度为100vh实现：
html, body {
height: 100vh;
margin: 0;
padding: 0;
}- 垂直居中布局
垂直居中布局是指内容在手机屏幕上垂直居中显示。可以通过设置父容器的高度为100vh，并使用flex布局实现垂直居中：
.container {
display: flex;
align-items: center;
height: 100vh;
}- 顶部固定布局
顶部固定布局是指网页顶部的内容固定在手机屏幕的顶部，不随滚动条滚动。可以通过设置内容区域的高度为100vh，并使用固定定位实现：
.container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}- 自适应图片布局
在网页制作中，经常需要在手机屏幕上显示自适应图片。可以使用vh单位设置图片的高度和宽度为Viewport的一定比例，例如设置图片的高度为50vh，宽度为50vh，即可实现自适应图片布局：
img {
height: 50vh;
width: 50vh;
}三、总结
通过使用CSS Viewport单位vh，我们可以方便地创建适配手机屏幕的网页布局。本文介绍了几种常见的布局方式，包括全屏布局、垂直居中布局、顶部固定布局和自适应图片布局，并提供了具体的代码示例。希望本文能够帮助读者更好地适配手机屏幕，提升网页的用户体验。
