Question

我为我的网站创建了一个打印模板但是我有问题，我的屏幕分辨率是1600x900所以我设计了该分辨率的页面，我正在谈论高度，因为我的页面是用Bootstrap创建的，所以它有响应，听起来有点奇怪，但让我解释一下，我的屏幕中的页面看起来像这样：

所有这些如果用于＆＃34;打印预览（ctrl + p）＆＃34;

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 screen and (min-width: 30em){…}而不是@media print and (min-width: 30em){}。

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

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

1 个答案: