有没有办法显示一个16：9的网页，它以正确的文本长宽比并且没有明显的像素显示在三个屏幕上延伸？

Question

背景

在商用电视上，有一种称为视频墙模式，您可以在一个屏幕上跨多个屏幕扩展一个模式。假设我正在使用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可以解决该问题吗？

Answer 1

假设您的网站只考虑了移动设备，并且想要使其更好地用于台式机，那么您将不会使用转换比例，对吗？只是不要为此使用变换。使用媒体查询并相应地调整元素的实际大小。使用这样的缩放比例会干扰像素值并导致这种模糊效果。

您使用的媒体大小无关紧要，响应式设计的原理是相同的。使用相对单位代替绝对单位，这并不难。

如果将rem单位用于字体大小，边距和填充等，以及无单位行高，则它们相对于根字体大小（默认情况下通常为16px），因此，通过修改font- html元素的大小，它们都将按比例缩放。对于常规布局结构，可以使用百分比，或者甚至更好，请使用CSS Grid and fr units。

图像将需要更多的工作，因为您应该证明对不同的大小使用不同的图像，但是对于其他所有操作，都可以做到这一点。

演示：

fr

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>

基本上是将像素值除以16（默认的根字体大小）。现在只添加一行，我们就可以扩展所有内容：

rem

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;
}