使用引导网格强制打印布局的视图端口大小

[英]Force view-port size for print layout with bootstrap grid


My page presents a form which breaks from horizontal to vertical at @screen-tablet which is around ~ 760px. an A4 page width is around ~600px.

我的页面显示了一个在@ screen-tablet上从水平到垂直的形式,大约是~760px。 A4页面宽度约为600像素。

In my print.css I'm shrinking all the text, e.g, font-size:85%so that all default font sized 14 will print at around 12. I also want to display the format and it's horizontal state, meaning - viewport > 760px. Problem is that the print layout sets the page width at A4 ~600px causing the form to display vertically.

在我的print.css中,我缩小了所有文本,例如,字体大小:85%,以便所有默认字体大小为14将打印在12左右。我还想显示格式和它的水平状态,意思是 - 视口> 760px。问题是打印布局将页面宽度设置为A4~600px,导致表格垂直显示。

Is there any way to "fool" the layout into thinking it's more than 760px?

有没有办法“愚弄”布局,认为它超过760px?

(I'm hoping for an answer that doesn't require setting a whole new layout for print - just making it look as it would on desktop).

(我希望得到一个答案,不需要为打印设置一个全新的布局 - 只是让它看起来像在桌面上一样)。

2 个解决方案

#1


0  

Use the transform property with a media query print type such as:

将transform属性与媒体查询打印类型一起使用,例如:

@media print {
  html {
    transform: scale(0.8);
  }
}

This will allow you to scale the document without reflow of content.

这将允许您缩放文档而无需重排内容。

#2


0  

For this, you can use the @media followed by any of these

为此,您可以使用@media,然后使用其中的任何一个

@media screen, @media print,@media screen, print

@media screen,@ media print,@ media screen,print

By defining the state of any style at the time of paint you can define every rule on @media screen, print which can work for the range in the document.

通过在绘制时定义任何样式的状态,您可以在@media屏幕上定义每个规则,print可以适用于文档中的范围。

Like you want to freeze the viewport to 700px then you can define the @media print rule for @media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }}. which define and set your viewport to a specific point.

就像你想要将视口冻结到700px然后你可以为@media屏幕定义@media打印规则,打印和(min-width <= 760px){body,html {min-width:700px; max-width:700px; }}。定义视口并将其设置为特定点。

Note: This rule can also be used for other work like transform and zoom as an aspect.

注意:此规则也可用于其他工作,如变换和缩放作为一个方面。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2014/08/23/876b5b87d50a8d3cd864780ca87aa70f.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号