I'm trying to use @media print along with min-width and max-width to target the currently selected paper size, to optimize for printing on both normal size paper (e.g. letter sized) versus photo sized paper (usually 4x6). But the media queries don't seem to evaluated correctly.
Here's an example of my 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>
Here's a snippet of my CSS file:
@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"
}
}
I have those for every width down to 1 to 2 inches wide.
When 8.5x11 paper, portrait is selected, I see "CSS: Matched 5 to 6". I would expect to see "CSS: Matched 7 to 8", because of the 0.5in margin.
When 8.5x11 paper, landscape is selected, I see "CSS: Matched 7 to 8". I expect to see "CSS: Matched 9 to 10" (again, because of 0.5in left and right margins).
When 4x6 paper, portrait is selected, I see "CSS: Matched 2 to 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".
I'm doing all this in Chrome, File->Print.
What am I getting wrong?