logo标签列表

为什么打印宽度媒体查询不正确？

cssprintingprinting-web-page
7
我正在尝试使用@media print和min-width以及max-width来针对当前选择的纸张大小进行优化，以便在普通大小的纸张（例如信纸大小）和照片大小的纸张（通常为4x6）上进行打印。但是媒体查询似乎没有正确地被评估。
以下是我的HTML示例：
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="photo.css">
  </head>
  <body>
    <div class="post">
      <div class="info">CSS: </div>
    </div>
  </body>
</html>

以下是我的CSS文件的一部分：

@media print {
  @page {
    margin: 0.5in;
  }
}
@media print and (max-width: 12.0in) and (min-width:11.0in) {
  .info:after {
    content: "Matched 11 to 12"
  }
}
@media print and (max-width: 11.0in) and (min-width:10.0in) {
  .info:after {
    content: "Matched 10 to 11"
  }
}
@media print and (max-width: 10.0in) and (min-width:9.1in) {
  .info:after {
    content: "Matched 9 to 10"
  }
}

我有各种宽度的选项，从1到2英寸宽不等。
当选择8.5x11纸张并选择纵向打印时，我看到“CSS：匹配了5到6个”。由于0.5英寸的页边距，我希望看到“CSS：匹配了7到8个”。
当选择8.5x11纸张并选择横向打印时，我看到“CSS：匹配了7到8个”。由于左右各有0.5英寸的页边距，我希望看到“CSS：匹配了9到10个”。
当选择4x6纸张并选择纵向打印时，我看到“CSS：匹配了2到3个”。这是正确的，因为4 - (2 * 0.5) = 3。但当选择横向打印时，我看到“CSS：匹配了3到4个”，而我希望看到“CSS：匹配了4到5个”。
我在Chrome中进行所有操作，点击文件->打印。
我错在哪里了？
2
只是为了明确，问题在于媒体查询似乎总是针对比实际页面小得多的页面。 - William Hertling
你尝试过去掉边距吗？ - dippas
你尝试过使用CSS重置器吗？ - GibboK
尝试使用以下代码中的size属性： @page { size: letter landscape; margin: 4.0cm; } - GibboK
我不想在CSS中设置纸张大小。我希望根据打印机页面的设置动态适应。 - William Hertling
1个回答
0
通常这是由于边框、边距或填充引起的。
去除边距并使用：
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

或者为边距/填充/边框添加宽度/高度也是另一种解决方案。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接