Question

我尝试使用@media打印以及最小宽度和最大宽度来定位当前选定的纸张尺寸，以优化在正常尺寸纸张（例如字母大小）和照片尺寸纸张上打印（通常为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纸张，肖像被选中时，我看到＆＃34; CSS：匹配5到6＆＃34;。我希望看到＆＃34; CSS：匹配7到8＆＃34;，因为0.5英寸的边距。

当8.5x11纸张，横向被选中时，我看到＆＃34; CSS：匹配7到8＆＃34;。我希望看到＆＃34; CSS：匹配9到10＆＃34; （再次，因为左边距和右边距为0.5英寸）。

当选择4x6纸张，肖像时，我看到＆＃34; CSS：匹配2到3＆＃34;。哪个是正确的，因为4 - （2 * 0.5）= 3.但是当选择了风景时，我看到＆＃34; CSS：匹配3到4＆＃34;，当我希望看到＆＃34; CSS：匹配4到5＆＃34;。

我在Chrome，File-＆gt; Print。

中完成所有这些操作

我出错了什么？

Answer 1

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

删除边距并使用：

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

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

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

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

1 个答案: