CSS3 补充内容 - CSS3 单位 - vw/vh

一、基本概念

视口单位（Viewport Units）是CSS3中引入的一组相对长度单位，它们相对于浏览器视口的尺寸。其中，vw（viewport width）表示视口宽度的1%，vh（viewport height）表示视口高度的1%。这些单位在响应式设计中非常有用，特别是当需要创建与视口尺寸直接相关的布局时。

核心知识点：

  • vw：视口宽度的1%，1vw = 视口宽度 / 100
  • vh：视口高度的1%，1vh = 视口高度 / 100
  • 视口单位是相对单位，会随着视口尺寸的变化而自动调整
  • 视口单位不受父元素或根元素字体大小的影响
  • 除了vw和vh，还有vmin（视口宽高中的较小值的1%）和vmax（视口宽高中的较大值的1%）

二、语法

使用视口单位的语法非常简单，只需要在数值后面加上相应的单位即可：

/* 基本语法 */
选择器 {
  属性: 值vw; /* 或 值vh, 值vmin, 值vmax */
}

/* 示例 */
.element {
  width: 50vw; /* 视口宽度的50% */
  height: 30vh; /* 视口高度的30% */
  font-size: 5vw; /* 字体大小为视口宽度的5% */
  margin: 2vh 0; /* 上下外边距为视口高度的2% */
}

注意事项：

  • 视口单位的数值可以是整数或小数
  • 视口单位是相对视口尺寸的，不是相对父元素或根元素的
  • 当视口尺寸改变时，使用视口单位的元素尺寸会自动调整
  • 视口单位在移动设备上也能正常工作，但需要注意移动设备的视口设置

三、使用场景

视口单位在以下场景中特别有用：

  1. 全屏布局：创建与视口大小完全匹配的元素
  2. 响应式字体：实现字体大小随视口宽度自动调整
  3. 视差滚动效果：创建基于视口高度的滚动效果
  4. 响应式间距：实现间距随视口尺寸自动调整
  5. 流体布局：创建不依赖固定宽度的布局

四、实用案例分析

案例1：全屏英雄区域

场景：创建一个全屏的英雄区域（Hero Section），高度始终等于视口高度。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏英雄区域</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 全屏英雄区域 */
    .hero {
      height: 100vh; /* 视口高度的100% */
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
      padding: 0 2rem;
    }

    .hero-title {
      font-size: 8vw; /* 字体大小为视口宽度的8% */
      font-weight: bold;
      margin-bottom: 2rem;
      max-width: 800px;
    }

    .hero-subtitle {
      font-size: 3vw; /* 字体大小为视口宽度的3% */
      margin-bottom: 3rem;
      max-width: 600px;
      opacity: 0.9;
    }

    .hero-btn {
      font-size: 1.2rem;
      padding: 1rem 2.5rem;
      background-color: white;
      color: #667eea;
      border: none;
      border-radius: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .hero-btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* 内容区域 */
    .content {
      padding: 5rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-title {
      font-size: 3rem;
      margin-bottom: 2rem;
      text-align: center;
    }

    .section-content {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }
  </style>
</head>
<body>
  <!-- 全屏英雄区域 -->
  <section class="hero">
    <h1 class="hero-title">欢迎来到我们的网站</h1>
    <p class="hero-subtitle">探索无限可能，创造美好未来</p>
    <button class="hero-btn">立即开始</button>
  </section>

  <!-- 内容区域 -->
  <section class="content">
    <h2 class="section-title">关于我们</h2>
    <p class="section-content">
      我们是一家专注于创新的科技公司，致力于为客户提供高质量的产品和服务。
      我们的团队由一群充满激情和创造力的专业人士组成，他们拥有丰富的行业经验和深厚的技术背景。
    </p>
    <p class="section-content">
      我们相信技术的力量可以改变世界，因此我们不断探索新的可能性，
      开发出能够解决实际问题的创新解决方案。
    </p>
  </section>
</body>
</html>

效果：英雄区域的高度始终等于视口高度，无论浏览器窗口大小如何变化。标题和副标题的字体大小使用vw单位，会随着视口宽度的变化而自动调整，确保在不同屏幕尺寸下都能保持良好的视觉效果。

案例2：响应式网格布局

场景：创建一个响应式网格布局，使用视口单位实现自适应的列宽和间距。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
    }

    /* 响应式网格容器 */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2vw; /* 间距为视口宽度的2% */
      padding: 4vw; /* 内边距为视口宽度的4% */
      max-width: 1400px;
      margin: 0 auto;
    }

    /* 网格项 */
    .grid-item {
      background-color: white;
      border-radius: 8px;
      padding: 2.5vw; /* 内边距为视口宽度的2.5% */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .grid-item:hover {
      transform: translateY(-5px);
    }

    .item-title {
      font-size: 4vw; /* 字体大小为视口宽度的4% */
      margin-bottom: 1.5vw;
      color: #2c3e50;
    }

    .item-content {
      font-size: 2.5vw; /* 字体大小为视口宽度的2.5% */
      color: #7f8c8d;
    }

    /* 响应式调整 */
    @media screen and (min-width: 768px) {
      .item-title {
        font-size: 1.5rem;
      }
      
      .item-content {
        font-size: 1rem;
      }
      
      .grid-item {
        padding: 1.5rem;
      }
      
      .grid-container {
        gap: 1.5rem;
        padding: 2rem;
      }
    }

    /* 页面标题 */
    .page-title {
      font-size: 8vw;
      text-align: center;
      margin: 5vw 0;
      color: #2c3e50;
    }

    @media screen and (min-width: 768px) {
      .page-title {
        font-size: 3rem;
        margin: 2rem 0;
      }
    }
  </style>
</head>
<body>
  <h1 class="page-title">响应式网格布局</h1>
  
  <div class="grid-container">
    <div class="grid-item">
      <h2 class="item-title">服务一</h2>
      <p class="item-content">提供高质量的专业服务，满足客户的各种需求。</p>
    </div>
    
    <div class="grid-item">
      <h2 class="item-title">服务二</h2>
      <p class="item-content">创新的解决方案，帮助客户实现业务目标。</p>
    </div>
    
    <div class="grid-item">
      <h2 class="item-title">服务三</h2>
      <p class="item-content">专业的技术支持，确保客户系统稳定运行。</p>
    </div>
    
    <div class="grid-item">
      <h2 class="item-title">服务四</h2>
      <p class="item-content">定制化的服务方案，适应不同客户的独特需求。</p>
    </div>
    
    <div class="grid-item">
      <h2 class="item-title">服务五</h2>
      <p class="item-content">持续的优化和改进，提升客户的业务效率。</p>
    </div>
    
    <div class="grid-item">
      <h2 class="item-title">服务六</h2>
      <p class="item-content">全面的培训和指导，帮助客户充分利用我们的服务。</p>
    </div>
  </div>
</body>
</html>

效果：网格布局使用视口单位实现了自适应的间距和内边距，在不同屏幕尺寸下都能保持良好的视觉效果。同时，通过媒体查询在较大屏幕上固定字体大小和间距，避免了在大屏幕上元素过大的问题。

案例3：视差滚动效果

场景：使用视口单位创建视差滚动效果，使背景图像和内容以不同的速度滚动。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视差滚动效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }

    /* 视差部分 */
    .parallax {
      position: relative;
      height: 100vh; /* 视口高度的100% */
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150vh; /* 背景高度为视口高度的150%，用于实现滚动效果 */
      background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20mountain%20landscape%20with%20blue%20sky%20and%20clouds&image_size=landscape_16_9');
      background-size: cover;
      background-position: center;
      transform: translateY(0);
      transition: transform 0.1s ease-out;
    }

    .parallax-content {
      position: relative;
      z-index: 1;
      text-align: center;
      color: white;
      padding: 0 2rem;
    }

    .parallax-title {
      font-size: 8vw;
      margin-bottom: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .parallax-subtitle {
      font-size: 4vw;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* 内容部分 */
    .content {
      padding: 5rem 2rem;
      background-color: white;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-title {
      font-size: 3rem;
      margin-bottom: 2rem;
      text-align: center;
    }

    .section-content {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }

    /* 第二个视差部分 */
    .parallax-2 {
      position: relative;
      height: 80vh; /* 视口高度的80% */
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 3rem 0;
    }

    .parallax-bg-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 130vh; /* 背景高度为视口高度的130% */
      background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20ocean%20view%20with%20sunset%20sky&image_size=landscape_16_9');
      background-size: cover;
      background-position: center;
      transform: translateY(0);
      transition: transform 0.1s ease-out;
    }

    .parallax-content-2 {
      position: relative;
      z-index: 1;
      text-align: center;
      color: white;
      padding: 0 2rem;
    }
  </style>
</head>
<body>
  <!-- 第一个视差部分 -->
  <section class="parallax">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
      <h1 class="parallax-title">探索自然之美</h1>
      <p class="parallax-subtitle">感受大自然的魅力与力量</p>
    </div>
  </section>

  <!-- 内容部分 -->
  <section class="content">
    <h2 class="section-title">关于自然</h2>
    <p class="section-content">
      自然是我们赖以生存的家园，它赋予我们生命所需的一切资源。
      从雄伟的山脉到广阔的海洋，从茂密的森林到无垠的沙漠，
      大自然展现出了无穷无尽的美丽和多样性。
    </p>
    <p class="section-content">
      我们应该珍惜和保护自然环境，减少人类活动对自然的破坏，
      让未来的世代也能欣赏到大自然的壮丽景色。
    </p>
    <p class="section-content">
      探索自然不仅可以让我们感受到它的美丽，还能让我们更加了解自己，
      培养我们的环保意识和责任感。
    </p>
  </section>

  <!-- 第二个视差部分 -->
  <section class="parallax-2">
    <div class="parallax-bg-2"></div>
    <div class="parallax-content-2">
      <h1 class="parallax-title">海洋的奥秘</h1>
      <p class="parallax-subtitle">探索深海的神秘世界</p>
    </div>
  </section>

  <!-- 内容部分 -->
  <section class="content">
    <h2 class="section-title">海洋保护</h2>
    <p class="section-content">
      海洋覆盖了地球表面的71%，是地球上最大的生态系统。
      它不仅为我们提供了丰富的食物资源，还调节着全球气候，
      吸收了大量的二氧化碳，为我们创造了适宜的生存环境。
    </p>
    <p class="section-content">
      然而，由于人类活动的影响，海洋环境正面临着前所未有的挑战，
      如海洋污染、过度捕捞、海洋酸化等。
      我们必须采取行动，保护海洋环境，确保海洋生态系统的健康和可持续发展。
    </p>
  </section>

  <script>
    // 实现视差效果
    function handleParallax() {
      const parallaxElements = document.querySelectorAll('.parallax-bg, .parallax-bg-2');
      
      parallaxElements.forEach(element => {
        const parent = element.parentElement;
        const parentTop = parent.getBoundingClientRect().top;
        const parentHeight = parent.offsetHeight;
        const windowHeight = window.innerHeight;
        
        // 计算滚动位置
        if (parentTop < windowHeight && parentTop > -parentHeight) {
          const scrollPosition = window.scrollY;
          const offset = scrollPosition * 0.5; // 滚动速度的一半
          element.style.transform = `translateY(${offset}px)`;
        }
      });
    }

    // 监听滚动事件
    window.addEventListener('scroll', handleParallax);
    // 初始化
    handleParallax();
  </script>
</body>
</html>

效果：通过使用视口单位设置视差部分的高度，实现了全屏或接近全屏的视觉效果。背景图像使用了比视口更高的高度，并通过JavaScript实现了滚动时的视差效果，使背景图像以不同的速度滚动，创造出深度感和层次感。

五、总结

视口单位（vw/vh）是CSS3中非常强大的相对长度单位，它们相对于浏览器视口的尺寸，为响应式设计提供了新的可能性。通过合理使用视口单位，可以实现以下效果：

  1. 全屏布局：创建与视口大小完全匹配的元素
  2. 响应式字体：实现字体大小随视口宽度自动调整
  3. 视差滚动效果：创建基于视口高度的滚动效果
  4. 自适应间距：实现间距随视口尺寸自动调整
  5. 流体布局：创建不依赖固定宽度的布局

在实际项目中，视口单位通常与其他单位（如rem、px、%）结合使用，以发挥各自的优势。同时，为了避免在大屏幕上元素过大或在小屏幕上元素过小的问题，通常会使用媒体查询进行响应式调整。

最佳实践：

  • 使用vw单位设置字体大小，实现响应式文本
  • 使用vh单位创建全屏或半屏的视觉效果
  • 结合媒体查询，在不同屏幕尺寸下调整视口单位的使用
  • 对于关键内容，设置最小和最大尺寸限制
  • 与其他单位（如rem、px）结合使用，平衡灵活性和稳定性
  • 在移动设备上测试视口单位的表现，确保良好的用户体验

注意事项：

  • 视口单位在移动设备上的表现可能与桌面设备不同，需要进行充分测试
  • 过度使用视口单位可能导致在极端屏幕尺寸下的布局问题
  • 视口单位不适合所有场景，需要根据具体需求选择合适的单位

通过掌握视口单位的使用方法，你可以创建更加灵活、响应式和视觉吸引力强的网页设计，为用户提供更好的浏览体验。视口单位是现代CSS响应式设计工具箱中的重要工具，值得每位前端开发者熟练掌握。

« 上一篇 CSS3 补充内容 - CSS3 单位 - rem 下一篇 » CSS3 补充内容 - CSS3 单位 - ch
↑