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

【问题标题】：CSS scale pixel size up and down based on screen sizeCSS根据屏幕大小上下缩放像素大小
【发布时间】：2020-12-26 16:07:27
【问题描述】：

我有一种屏幕尺寸（例如 800x600 屏幕尺寸）的像素详细信息（字体大小和组件宽度和高度，以 px 为单位）。我想实现一个可以在不同屏幕尺寸上运行的 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 中的内置内容吗？

【问题讨论】：

@media only screen and (width: 800px) and (height: 600px) { font-size: 16px; } 800x600px 怎么样？此外，对于其他屏幕尺寸，您正在寻找的确切公式是什么（即使目前无法计算）？
是的，你应该使用媒体查询，没有办法使用纯 css 将 vw 转换为 px。

标签： html css font-size

【解决方案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 的新添加。我知道至少有一种不常见的浏览器无法使用（尽管它计划了 Soon™ 的更新）。这些部分可以重构为使用@media。

【讨论】：

没有人可以在不运行它的情况下验证您的答案，并且 sn-p 是为此目的而创建的，但是很好......
@TemaniAfif 转换为 sn-p 并不能增强答案，因为代码依赖于能够在大范围内调整视图宽度。
既然 OP 要求这样的 large 范围，那么我想他能够做到这一点，我们大多数人都可以做到，因为 800px 并不是那么大。我们还有响应式选项卡，我们可以在其中定义任何屏幕尺寸。