猫先生头条

一文搞懂：viewpoint与rem、百分比、px

2024-03-19 00:19 由 yoyoj游鲸 发表于 #前端开发

基础与面试题：viewpoint 与 rem、百分比高度、px

一、定义

​ 一个表总结：

名称 定义 使用示例
viewpoint 是指用户在网页上实际可见和可交互的区域，通常指的是浏览器窗口或移动设备的屏幕尺寸。 width：100vw；height：100vh
rem （root em）是相对于根元素（通常是 <html> 元素）的字体大小来计算的单位。 width：100rem；height：100rem
百分比 是相对于父元素的尺寸来计算所占大小 width：100%；height：100%
px 像素 width：100px；height：100px

知识点补充：

1、viewpoint 怎么来的？

注意：若要使用 viewpoint 必须在 <html> 的 <head> 中做如下声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • width=device-width：使 viewport 宽度等于设备的屏幕宽度，确保网页在移动设备上可以完全显示。
  • initial-scale：设置初始缩放级别，通常设置为 1，以避免页面自动缩放。
  • minimum-scale 和 maximum-scale：指定允许用户进行缩放的最小和最大比例。
  • user-scalable：控制用户是否可以手动缩放页面。

​ “viewport” 是一个非常重要的概念，特别是在移动端开发中更为突出。

​ 在传统的桌面浏览器中，viewport 的大小通常是浏览器窗口的大小，而在移动设备上，情况会更加复杂，因为移动设备的屏幕尺寸各异，且用户可以缩放页面。为了使网页在移动设备上有良好的可视性和可交互性，开发者需要控制和优化 viewport。

​ Viewport 的计算方式可以用以下公式表示：(以 vw 为例子，vh 同理)

viewport width = device width / device pixel ratio

​ 其中，viewport width 表示视口的宽度，device width 表示设备的物理像素宽度，device pixel ratio 表示设备像素比。

​ 通过js进行计算示例：

// 获取视口宽度
const viewportWidth = window.innerWidth;

// 获取屏幕像素比
const pixelRatio = window.devicePixelRatio;

// 计算得到视点的大小
const viewportSize = viewportWidth / pixelRatio;

// 输出视口宽度
console.log("视点:" + viewportSize); // 这就是100vw的大小了，相当于正好屏幕的宽度

2、rem 单位大小是怎么计算的

​ rem 是指相对于根元素（<html> 元素）的字体大小的单位，它的计算方式是基于设备视口宽度和根元素字体大小的比例关系。

​ 为了适应不同设备的视口大小和分辨率，我们通常使用相对字体大小作为网页设计的基础单位。和相对于父级元素大小的 em 单位不同，rem 单位只相对于根元素的字体大小，因此可以确保网页布局在不同的设备和屏幕尺寸下一致。

​ 假设我们将根元素的字体大小设置为 16px，则 1rem 就等于 16px。例如，如果我们使用 font-size: 1.5rem 来设置某个元素的字体大小，则该元素的字体大小就等于 1.5 * 16px = 24px。

​ 当根据构建响应式的设计时，rem 单位也可以用于设置其他的样式属性，例如 padding、 margin、width 等。

​ 为了确保使用 rem 单位时计算结果正确，我们需要考虑视口宽度和根元素字体大小的关系。一般来说，我们会将根元素字体大小设置为一个比较合适的基准大小，例如 16px、14px 等。然后，根据视口宽度的变化，调整字体大小和布局的比例关系。

具体计算方式如下：

rem = px / 基准字号

其中，px 表示元素属性的像素值，基准字号表示根元素的字体大小（单位为 px）。通过这个公式，我们可以将像素单位转换成 rem 单位，并保证网页在不同设备下的字体和布局一致。

需要注意的是：使用 rem 单位时，不同浏览器对于字体大小的计算方式可能会存在差异。因此，在实际开发中，你可能需要使用 @media 媒体查询或 JS 脚本来动态调整根元素的字体大小和 rem 单位的计算方式。

​ 使用 js 获取根节点的字体大小：

// 获取根元素
const rootElement = document.documentElement;

// 获取计算后的样式
const computedStyle = window.getComputedStyle(rootElement);

// 获取根元素上的字体大小
const fontSize = computedStyle.getPropertyValue('font-size');

// 输出字体大小
console.log("字体大小:" + fontSize); // 一般而言是 16px, 也就是 1rem

二、viewpoint 与 rem 的差异

  1. 单位类型：
    • rem（root em）是相对于根元素（通常是 <html> 元素）的字体大小来计算的单位。
    • viewport 是指用户在网页上实际可见和可交互的区域，通常指的是浏览器窗口或移动设备的屏幕尺寸。
  2. 适用范围：
    • rem 主要用于设置字体大小和元素尺寸，它是相对于根元素的字体大小来计算的，可以用于实现相对于根元素的等比缩放。
    • viewport 主要用于控制网页在移动设备上的显示效果，通过 <meta> 标签设置 viewport，以确保页面在不同设备上以正确的比例显示，并控制用户是否可以缩放页面。
  3. 计算方式：
    • rem 的计算是相对于根元素的字体大小，例如，1rem 等于根元素的字体大小。
    • viewport 的计算是相对于视口的大小，例如，1vw 等于视口宽度的 1%。
  4. 应用场景：
    • rem 通常用于实现相对于根元素的等比缩放，特别适用于响应式设计。
    • viewport 用于控制网页在移动设备上的显示效果，确保页面在不同设备上以正确的比例显示，并控制用户是否可以缩放页面

三、viewpoint 与 百分比 的差异

  1. 基准不同：
    • 百分比是相对于父元素的尺寸来计算的，而vw/vh是相对于视口的尺寸来计算的。
    • 如果父元素的尺寸与视口尺寸相同，那么百分比和vw/vh可能会产生相似的效果。但如果父元素的尺寸与视口尺寸不同，那么它们就会产生不同的效果。
  2. 响应式性：
    • 使用vw/vh更具有响应式的特性，因为它们是相对于视口的大小来计算的，可以随着视口的变化而变化，从而更好地适应不同设备的屏幕尺寸。
    • 百分比相对于父元素的大小计算，如果父元素的大小发生变化，那么百分比计算出的大小也会相应变化，但它不直接与视口大小相关联。
  3. 用途不同：
    • 在某些情况下，使用百分比可能更适合，特别是当元素的尺寸应该相对于其父元素而不是整个视口时。
    • 使用vw/vh通常更适合于实现基于视口大小的布局和设计，尤其是在移动设备上。

四、像素（px）

一块屏幕的能显示的部分都是由一个一个的像素点构成的。在网页和UI中，这也是不可再细分的单位，也是最小的单位。

上述 viewpoint、 rem、em、百分比 其实本质上都是要确定需要在屏幕上使用多少个宽度像素作为一个基准单位来适应不同屏幕大小，以正常显示网页内容。

​ 像素是图像显示和数字图形处理中的基本单位，用于描述图像的分辨率和清晰度。一个像素代表图像中的一个最小的、不可分割的点或颜色单元，是构成数字图像的基本单元之一。

​ 在计算机图形学中，像素通常表示为一个有限的方块或矩形区域，每个像素可以包含一个颜色值，用于描述图像在该点的色调、亮度和饱和度等信息。根据颜色深度的不同，每个像素可以包含不同位数的颜色信息，例如 8 位颜色（256 色）、24 位真彩色（约 1677 万色）等。

​ 像素密度指的是每英寸包含的像素数量，通常表示为每英寸的像素数（PPI，Pixels Per Inch）。像素密度越高，图像显示的细节和清晰度就会更高，比如高分辨率的 Retina 显示屏就有更高的像素密度。

在不同的设备和显示器中，像素的大小和显示方式可能有所不同。例如，传统液晶显示器中的像素是一个固定大小的点，而在 Retina 显示屏等高密度显示器中，一个逻辑像素可能会对应多个物理像素，以提供更高清晰度的显示效果。

​ 总的来说，像素是数字图像中描述图形、图像和文本的基本单元，它在计算机视觉、数字图形处理、网页设计等领域都有着重要的作用。我们通过调整像素的颜色、位置和密度等属性，可以创造出各种丰富多彩的视觉效果。

五、使用方法推荐

本文并没有对 em 做重点讲解，但我考虑再三，还是把它加上，方便自己，也方便大家。

不同的单位在网页设计和布局中有各自的优势和适用场景，下面简单介绍一下它们的特点和使用时机：

  1. viewport 单位（vw、vh、vmin、vmax）：
    • 最适用时机：viewport 单位是相对于视口大小的单位，适用于创建响应式布局和元素尺寸的动态调整。可以使用 vw、vh 来设置视口宽度和高度的百分比，vmin 和 vmax 可以根据视口的最小或最大维度来设置大小。
  2. rem 单位：
    • 最适用时机：rem 单位是相对于根元素（<html>）字体大小的单位，适用于字体大小、间距和布局的一致性调整。通过设置根元素的字体大小，可以灵活地调整整个页面的布局比例。
  3. em 单位：
    • 最适用时机：em 单位是相对于父元素字体大小的单位，适用于定义相对于父元素的尺寸比例。可以用于嵌套元素样式的简化和响应式设计中的相对大小设置。
  4. 百分比单位（%）：
    • 最适用时机：百分比单位可以相对于父元素的大小进行设置，适用于创建相对于父元素的大小比例调整，实现响应式设计以及布局的弹性调整。
  5. 像素单位（px）：
    • 最适用时机：像素单位是绝对长度单位，适用于固定尺寸的元素设置，如边框、阴影等。在某些情况下，使用像素单位可以确保元素大小的准确性和稳定性。

根据以上介绍，在实际 web 开发中，我们可以根据布局的需求和设计的灵活性来选择合适的单位。通常情况下，我们会结合使用不同单位来实现网页布局的灵活性和响应式设计的需求。在具体实践中，根据设计的要求和布局的需要，选择合适的单位来辅助网页设计和开发。

补充：（基准字号）

基准字号的确定并没有一个固定的规定，它可以根据具体的设计需求和开发者的偏好来进行选择。一般来说，基准字号可以根据以下几个方面来确定：

  1. 设计师的建议：设计师通常会提供一些基准字号的建议，以适应设计稿的比例和整体效果。你可以与设计团队或者设计师讨论，并根据他们的建议来设定基准字号。

  2. 浏览器的默认字号：浏览器默认字号一般设置为 16px，因此在没有显式设置基准字号的情况下，可以将其作为默认的基准字号。

  3. 用户体验和可读性：考虑到网页的可读性和用户体验，合适的基准字号应该在保持字体清晰度的同时，不会过大或过小，以免影响用户的阅读和浏览体验。通常建议基准字号在 14px 到 18px 之间。

  4. 响应式布局考虑因素：如果你的网页设计是响应式的，需要适应不同的设备和屏幕尺寸，可以根据不同的媒体查询设置不同的基准字号，以满足不同屏幕大小下的显示需求。

当你确定了基准字号后，可以将其应用于根元素 <html> 的样式中，例如：

html {
  font-size: 16px; /* 基准字号 */
}

然后，使用 rem 单位来设置其他元素的字体大小、间距等属性，像这样：

h1 {
  font-size: 2rem; /* 相当于 32px（2 * 16px） */
  margin-bottom: 1.5rem; /* 相当于 24px（1.5 * 16px） */
}

值得注意的是，为了确保不同设备上的一致性，通常会使用媒体查询或 JavaScript 等技术根据设备的宽度动态调整基准字号。这样可以确保在不同设备上字体大小和布局的比例关系相对一致。例如，可以通过媒体查询来设置不同视口宽度下的基准字号，以适应不同屏幕大小。

热门相关：盖世双谐   修罗武帝   南少，你老婆又跑了   风流医圣   美食萌后：皇上，喂不饱！