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

【问题标题】：Why are print width media queries incorrect?为什么打印宽度媒体查询不正确？
【发布时间】：2014-11-12 03:01:23
【问题描述】：

我正在尝试使用@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 文件的 sn-p：

@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”。我希望看到“CSS：匹配 7 到 8”，因为边距为 0.5 英寸。

当8.5x11纸时，选择景观，我看到“CSS：匹配为7到8”。我希望看到“CSS：匹配 9 到 10”（同样，因为 0.5 英寸左右的边距）。

当4x6纸时，选择肖像，我看到“CSS：匹配2到3”。 Which is correct, because 4 - (2 * 0.5) = 3. But when landscape is selected, I see "CSS: Matched 3 to 4", when I would expect to see "CSS: Matched 4 to 5".

我在 Chrome 中执行所有这些操作，文件->打印。

我做错了什么？

【问题讨论】：

明确一点，问题在于媒体查询似乎总是针对比实际页面小得多的页面。
你试过去掉边距吗？
您是否尝试过使用 CSS 重新设置器？
尝试使用这样的 size 属性... @page { size: letter Landscape;边距：4.0cm； }
我不想在我的 CSS 中设置纸张大小。我想根据打印机页面设置的内容动态调整。

标签： css printing printing-web-page

【解决方案1】：

这通常是由于边框、边距或填充。

删除边距并使用：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

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

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

【讨论】：