如何使用 viewport 取代 flexible 进行移动端适配？

2024-02-03 20:51:47

在移动端设备日益普及的今天，如何实现网页在不同屏幕尺寸下的完美适配已成为一个亟待解决的问题。flexible 与 viewport 都是常用的移动端适配方案，本文将从 flexible 的源码入手，分析其实际应用场景，并阐述为何目前不推荐继续使用 flexible 而推荐使用 viewpoint。同时，本文还将详细列出这两者的区别，帮助读者更好地理解和选择合适的移动端适配方案。

flexible 源码解析

flexible 的源码非常简单，仅有几行代码。其核心思想是通过在根元素上设置 font-size，然后通过媒体查询来调整 font-size 的值，从而实现网页元素在不同屏幕尺寸下的适配。

html {
  font-size: 100px;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 50px;
  }
}

flexible 的实际应用场景

flexible 非常适合那些需要在不同屏幕尺寸下保持元素比例不变的场景。例如，当我们设计一个需要在手机和平板电脑上同时显示的网页时，就可以使用 flexible 来实现。

为何不推荐继续使用 flexible

虽然 flexible 在某些场景下非常有用，但它也存在一些问题。首先，flexible 会导致字体大小在不同屏幕尺寸下发生变化，这可能会影响用户体验。其次，flexible 不支持 view-based media queries，这使得它在某些情况下无法实现预期的效果。

viewport 取代 flexible 的优势

viewport 是另一个常用的移动端适配方案，它通过在 meta 标签中设置 viewport 的宽度和缩放比例来实现网页在不同屏幕尺寸下的适配。viewport 的优势在于它不会影响字体大小，并且支持 view-based media queries。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport 与 flexible 的区别

viewport 和 flexible 的主要区别在于：

viewport 通过在 meta 标签中设置 viewport 的宽度和缩放比例来实现适配，而 flexible 通过在根元素上设置 font-size 来实现适配。
viewport 支持 view-based media queries，而 flexible 不支持。
viewport 不会影响字体大小，而 flexible 会导致字体大小在不同屏幕尺寸下发生变化。