Question

我有一种屏幕尺寸（例如 800x600 屏幕尺寸）的像素详细信息（字体大小和组件宽度和高度，以像素为单位）。我想实现一个可以在不同屏幕尺寸上运行的 HTML 页面。 但在 800x600 屏幕尺寸上，它应该适合/具有完全相同的给定像素尺寸。

Example: 
font-size: 16px -- On 800x600 screen size.    
font-size: 24px -- 16px scale to 24px on xxxxxx screen size

我已经探索过 vw, vh 但它取决于容器的宽度/高度，我需要将 px 大小计算为 vw/vh 大小。
此外，百分比大小需要使用像素大小进行转换。
我们可以使用 CSS 中内置的东西吗？

Answer 1

:root {
  --font-size-min: 16;
  --font-size-max: 24;
    
  --width-min: 800;
  --width-max: 1920;
  
  --font-size-delta: calc(var(--font-size-max) - var(--font-size-min));
  --font-size-min-px: calc(1px * var(--font-size-min));
  --width-delta: calc(var(--width-max) - var(--width-min));
  --width-min-px: calc(1px * var(--width-min));
  --width-delta-px: calc(1px * var(--width-delta));
  --width-lower: calc(100vw - var(--width-min-px));
  --width-limit: min(max(var(--width-lower), 0px), var(--width-delta-px));
  --scale-ratio: calc(var(--font-size-delta) / var(--width-delta));
  --font-size-zero: calc(var(--width-limit) * var(--scale-ratio));
  
  --font-size: calc(var(--font-size-zero) + var(--font-size-min-px));
}
body {
  font-size: var(--font-size);
}

这被设置为在 800 像素的视图宽度下字体大小为 16 像素，在 1920 像素的视图宽度下字体大小为 24 像素。它的两端也有上限，并在两者之间进行缩放。

通常，您需要选择宽度或高度来匹配。事实上的标准是使用宽度，这就是我在这里所做的。

这完全在 CSS 中完成必要的计算。 --font-size-* 和 --width-* 必须是无量纲单位；其余变量负责将它们转换为 px 单位。

很多都可以优化。我这样留下来是为了更清楚发生了什么。

注意：min() 和 max() 是 CSS 的新增内容。我知道至少有一种不常见的浏览器不能使用（尽管有一个计划很快更新™）。这些部分可以重构为使用 @media。

CSS 根据屏幕大小上下缩放像素大小

1 个答案: