我正在尝试使用@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”。我希望看到“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 中执行所有这些操作，文件 -> 打印。
我哪里错了？
最佳答案
通常这是由于边框、边距或填充造成的。
删除边距并使用:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
或为边距/填充/边框添加宽度/高度是另一种解决方案。
关于css - 为什么打印宽度媒体查询不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25901348/