有没有办法以正确的文本宽高比且没有明显的像素化来显示超过 3 个屏幕的 16:9 网页？
Is there a way to display a 16:9 web page stretched over more than 3 screens with correct text aspect ratio and without noticeable pixelation?
背景
在商用电视上，有一种称为视频墙模式的模式，您可以在其中将单个桌面延伸到多个屏幕上。假设我正在使用 4 个屏幕，我正在尝试制作一个看起来没有拉伸的网页，这意味着在显示一个桌面的普通单屏幕上，它看起来像是被压缩了 4 次。
我目前有一个部分解决方案，方法是创建一个 4 桌面宽的页面，然后使用 CSS 转换将页面水平缩放 1/4。
虽然图像模糊，但可以通过排除对带有图像的元素的变换来缓解这种情况。
问题
缩放变换完成后，字体像素化，就好像它们经过了糟糕（低质量）的 jpeg 压缩。
下面是我当前的代码示例。
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
display: flex;
flex-flow: row;
white-space: nowrap;
overflow: hidden;
min-width: min-content;
animation: fadein 3s;
}
@keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
.screen {
display: grid;
grid: 50% auto / 50% auto;
}
.main {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
}
.dynamic {
grid-column: 1 / 2;
grid-row: 2 / 3;
float: left;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.list {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.dynamic .item {
position: relative;
height: 100%;
width: 49.8%;
}
.dynamic .item > div {
position: relative;
transform-origin: left;
}
.dynamic .item .name {
display: block;
}
.dynamic .item .header > * {
display: inline-flex;
}
.dynamic .item .values > * {
display: inline-flex;
}
@media (min-aspect-ratio: 16/9) {
body {
font-size: 4vh;
height: 100vh;
}
.screen {
width: calc(8000vh/(9*5));
height: 100vh;
}
.dynamic .text { font-size: 2vh }
.dynamic .name > * { font-size: 4vh }
.list { font-size: 2vh }
.list .title { font-size: 4vh }
}
@media (aspect-ratio: 16/9) {
body {
flex-direction: row;
width: calc(8000vh/9);
height: 100vh;
transform: scaleX(.25);
transform-origin: top left;
}
}
<div class="screen">
<div class="list">
<div class="section">
<div class="title text">Subsection 1</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
<div class="section">
<div class="title text">Subsection 2</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
</div>
<div class="main"></div>
<div class="dynamic">
<div class="item">
<div class="name"><span class="text">Subsection 1</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
<div class="item">
<div class="name"><span class="text">Subsection 2</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
</div>
</div>
是什么原因造成的，是否有解决方法，使用 HTML/CSS?
假设您有一个只考虑移动设备的网站，并且您想让它适合桌面，您不会使用变换比例，对吗？根本不要为此使用转换。使用媒体查询并相应地调整元素的实际大小。使用这样的比例会扰乱像素值并导致这种模糊效果。
无论您使用的媒体有多大或多小，响应式设计的原则都是一样的。使用相对单位而不是绝对单位，这并不难。
如果你使用 rem 字体大小、边距和填充等单位，以及无单位的行高，它们是相对于根字体大小（默认情况下通常为 16px），所以通过修改 html 元素上的字体大小，它们都将按比例缩放。对于一般的布局结构，可以使用百分比，甚至更好，使用CSS Grid and fr units.
图像将需要更多的工作，因为您应该为不同的尺寸使用不同的图像，但对于其他一切，这就可以了。
演示：
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
很简单吧？转换为 rem 基本上是像素值除以 16（默认根字体大小）。现在只需添加一行，我们就可以缩放所有内容：
html { font-size: 32px; } /* added just that, doubling the scale (16*2 = 32) */
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
编辑：好的，我现在看到了——在对评论的讨论之后。如果您的硬件是进行缩放的硬件，而不是浏览器，我相信您不走运。但是应该可以将您的显示器配置为相互水平扩展，这将使它成为一个合适的 7680x1080 canvas，您可以使用 64:9 宽高比的媒体查询来检测它。大多数 OS 都会有这个选项（不包括像 windows starter 这样的东西）。例如，Ubuntu 是一个开箱即用的免费选项。我只是假设这就是您所拥有的，因为这通常是最简单的方法。
我发现原因与 OS 抗锯齿有关 - 因为我相信您不应该能够通过浏览器更改或强制字体抗锯齿。
因为我在 Windows，启用 ClearType 使文本变得足够清晰易读。
背景
在商用电视上，有一种称为视频墙模式的模式，您可以在其中将单个桌面延伸到多个屏幕上。假设我正在使用 4 个屏幕，我正在尝试制作一个看起来没有拉伸的网页，这意味着在显示一个桌面的普通单屏幕上，它看起来像是被压缩了 4 次。
我目前有一个部分解决方案，方法是创建一个 4 桌面宽的页面，然后使用 CSS 转换将页面水平缩放 1/4。
虽然图像模糊，但可以通过排除对带有图像的元素的变换来缓解这种情况。
问题
缩放变换完成后，字体像素化，就好像它们经过了糟糕（低质量）的 jpeg 压缩。
下面是我当前的代码示例。
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
display: flex;
flex-flow: row;
white-space: nowrap;
overflow: hidden;
min-width: min-content;
animation: fadein 3s;
}
@keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
.screen {
display: grid;
grid: 50% auto / 50% auto;
}
.main {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
}
.dynamic {
grid-column: 1 / 2;
grid-row: 2 / 3;
float: left;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.list {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.dynamic .item {
position: relative;
height: 100%;
width: 49.8%;
}
.dynamic .item > div {
position: relative;
transform-origin: left;
}
.dynamic .item .name {
display: block;
}
.dynamic .item .header > * {
display: inline-flex;
}
.dynamic .item .values > * {
display: inline-flex;
}
@media (min-aspect-ratio: 16/9) {
body {
font-size: 4vh;
height: 100vh;
}
.screen {
width: calc(8000vh/(9*5));
height: 100vh;
}
.dynamic .text { font-size: 2vh }
.dynamic .name > * { font-size: 4vh }
.list { font-size: 2vh }
.list .title { font-size: 4vh }
}
@media (aspect-ratio: 16/9) {
body {
flex-direction: row;
width: calc(8000vh/9);
height: 100vh;
transform: scaleX(.25);
transform-origin: top left;
}
}
<div class="screen">
<div class="list">
<div class="section">
<div class="title text">Subsection 1</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
<div class="section">
<div class="title text">Subsection 2</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
</div>
<div class="main"></div>
<div class="dynamic">
<div class="item">
<div class="name"><span class="text">Subsection 1</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
<div class="item">
<div class="name"><span class="text">Subsection 2</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
</div>
</div>
是什么原因造成的，是否有解决方法，使用 HTML/CSS?
假设您有一个只考虑移动设备的网站，并且您想让它适合桌面，您不会使用变换比例，对吗？根本不要为此使用转换。使用媒体查询并相应地调整元素的实际大小。使用这样的比例会扰乱像素值并导致这种模糊效果。
无论您使用的媒体有多大或多小，响应式设计的原则都是一样的。使用相对单位而不是绝对单位，这并不难。
如果你使用 rem 字体大小、边距和填充等单位，以及无单位的行高，它们是相对于根字体大小（默认情况下通常为 16px），所以通过修改 html 元素上的字体大小，它们都将按比例缩放。对于一般的布局结构，可以使用百分比，甚至更好，使用CSS Grid and fr units.
图像将需要更多的工作，因为您应该为不同的尺寸使用不同的图像，但对于其他一切，这就可以了。
演示：
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
很简单吧？转换为 rem 基本上是像素值除以 16（默认根字体大小）。现在只需添加一行，我们就可以缩放所有内容：
html { font-size: 32px; } /* added just that, doubling the scale (16*2 = 32) */
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
<a href="#" class="navbar__item">item</a>
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
编辑：好的，我现在看到了——在对评论的讨论之后。如果您的硬件是进行缩放的硬件，而不是浏览器，我相信您不走运。但是应该可以将您的显示器配置为相互水平扩展，这将使它成为一个合适的 7680x1080 canvas，您可以使用 64:9 宽高比的媒体查询来检测它。大多数 OS 都会有这个选项（不包括像 windows starter 这样的东西）。例如，Ubuntu 是一个开箱即用的免费选项。我只是假设这就是您所拥有的，因为这通常是最简单的方法。
我发现原因与 OS 抗锯齿有关 - 因为我相信您不应该能够通过浏览器更改或强制字体抗锯齿。
因为我在 Windows，启用 ClearType 使文本变得足够清晰易读。