使页面适合任何屏幕分辨率

Question

我正在为我的网站创建一个打印模板，一切正常，但我有一个问题，我的屏幕分辨率是 1600x900，所以我为该分辨率设计页面，我说的是高度，因为我的页面是用Bootstrap 所以它是响应式的，听起来有点奇怪，但让我解释一下，我屏幕上的页面如下所示：

所有这些如果用于“打印预览 (ctrl + p)”

Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Some text
Footer
Some text
Some text
Some text
Some text

但是当我尝试使用其他分辨率时，看起来像这样：

Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text

Page 2
Some text
Footer
Some text
Some text
Some text
Some text

我的问题是，是否存在一种方法可以使页面适应任何分辨率的相同高度，换句话说，准确地显示页面在我的屏幕中的外观。

这是我尝试过的：

 p {
        font-size: 12px;
        line-height: 1;
    }

    @page {
        size: A4 landscape;
        margin-left: 18mm;
        margin-top: 0.2mm;
    }

这有时可行，我不希望您为我编写代码，但我希望有一些提示可以解决这个问题，提前感谢，如果无法理解，我深表歉意

Answer 1

你解决这个问题是错误的。世界上有无数种屏幕尺寸。考虑单一分辨率进行设计是错误的。充其量您可以定位一系列具有相似尺寸的设备，但是您会排除大量不同的设备。

网页不需要在每台设备上看起来都一样。一旦你内化了这一点，你就会开始成为一个更好的网页设计师。

总而言之，您可以使用视口单位来确保元素的大小与任何屏幕尺寸成比例，但这不会是一种万能的解决方案，我不相信这一点打印时工作。

例如：

.container{ height: 100vh width: 100vw; }

您还可以使用媒体查询来告诉浏览器应该如何打印您的网页，这是确保页面按您希望的方式打印的好方法。例如，您可以写成@media print and (min-width: 30em){}，而不是@media screen and (min-width: 30em){…}。

请记住，您的打印样式表可能已经在使用来自其他移动设备或平板电脑媒体查询的样式，因此有时会有点棘手，您可能需要覆盖它们。打印的文档通常有一个非常狭窄的“视口”。