百分比、vw、vh和媒体查询：移动端适配的最佳方法

前端

2023-11-25 03:04:59

移动端适配：让你的网站在任何设备上闪耀

随着移动设备的普及，确保网站在所有设备上都能正常显示已成为 Web 设计面临的主要挑战。本文将深入探讨四种最常用的移动端适配方法，让你轻松为不同屏幕尺寸优化你的网站。

方法 1：百分比

百分比是一种灵活的布局方式，允许元素根据其父元素的尺寸调整大小。这种方法适用于创建响应式布局，因为父元素的尺寸会随着设备大小而变化。然而，如果父元素的尺寸为 0，则子元素也将消失，这可能会导致布局问题。

方法 2：VW 和 VH

VW 和 VH 是两个相对较新的单位，分别等于视口宽度的 1% 和视口高度的 1%。这些单位适用于创建响应式布局，因为视口的大小会随着设备大小而变化。VW 和 VH 的一个优点是它们不受父元素尺寸的影响。

方法 3：媒体查询

媒体查询是一种强大的工具，可根据设备功能或特征应用不同的样式。例如，你可以使用媒体查询为小屏幕设备应用特定的样式。媒体查询非常适合创建复杂的响应式布局。

方法 4：REM 和 EMS

REM 和 EMS 是相对较新的单位，分别等于根元素字体大小的 1% 和当前元素字体大小的 1%。这些单位适用于创建响应式布局，因为根元素字体大小会随着设备大小而变化。REM 和 EMS 不受父元素尺寸的影响，即使父元素的尺寸为 0，子元素仍然会显示。

巧妙结合不同方法

这四种方法可以组合使用，以创建复杂而响应式的布局。例如，你可以使用百分比创建基本布局，然后使用 VW 和 VH 进行微调。媒体查询可以为不同设备应用自定义样式。

示例：代码片段

body {
  font-size: 16px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  height: 10vh;
  background-color: #333;
  color: #fff;
}

.main {
  padding: 1rem;
}

.footer {
  height: 10vh;
  background-color: #f9f9f9;
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }

  .header {
    height: 8vh;
  }

  .footer {
    height: 8vh;
  }
}