适合任何屏幕分辨率

我为我的网站创建一个打印模板一切都很好，但我有一个问题，我的屏幕分辨率是1600x900，所以我设计了该分辨率的页面，我说的是高度，因为我的网页与引导创建的，因此它的响应，听起来有些奇怪，但让我解释一下，在我的屏幕上的页面看起来是这样的：适合任何屏幕分辨率

这一切如果“打印预览（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; 
    }

有了，有时工作，我不希望你对我的代码，但我希望一些技巧来解决这个问题，在此先感谢，如果这个我道歉无法理解

来源

2016-08-29 Francisco Fernandez

回顾如何创建[打印样式表]（http://www.webcredible.com/blog/print-stylesheet-definitive-guide/）。互联网上有很多网站解释如何。基本上，你将需要做更多的工作，而不仅仅是设置页面大小和边距。 –

我在考虑改变字体大小，边距，页面大小和我的所有内容，以适应最常见的分辨率 –

你正在接近这个问题错了。世界上有各种各样的屏幕尺寸。设计一个单一的解决方案是错误的。充其量，您可以瞄准一系列具有相似尺寸的设备，但是您不包括大量不同的设备。

网页不需要在每个设备上看起来都一样。只要你将其内化，你就会开始成为一个更好的网页设计师。所有这一切说，你可以使用视口单位来确保一个元素保持与任何屏幕尺寸成比例的大小，但它不会是一个适合所有尺寸的解决方案，而且我也不相信这在您打印时有效。

例如：

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

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

请记住，您的打印样式表可能已经在使用来自其他移动或平板媒体查询的样式，所以有时可能会有点棘手，您可能需要重写它们。印刷文件通常具有非常窄的“视口”。

来源

2016-08-29 16:20:54 Ragdoll

我明白你的意思，我认为我的问题不是很清楚，页面在任何分辨率因为是响应式（我使用Bootstrap），当我键入CTRL + P我的目标是一个特定的div和在我的屏幕上，我可以在一个页面上打印该div，但是当我在另一个屏幕分辨率相同时，我打印该div 2页或更多的问题，我想知道它是否可能适合任何分辨率 –

我编辑添加有关打印媒体查询，这可能是您正在寻找的信息。 – Ragdoll

适合任何屏幕分辨率

回答

相关问题