I am trying to use @media printing along with the minimum width and maximum width to select the selected paper size in order to optimize printing on plain paper (e.g. letter) compared to photo format paper (usually 4x6). But media queries do not seem to be priced correctly.
Here is 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 is 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 for each width up to 1-2 inches wide.
When 8.5x11 paper is selected, the portrait is selected, I see "CSS: 5-6 match". I would expect to see "CSS: match 7 to 8" because of the 0.5in field.
When 8.5x11 paper is selected, the landscape is selected, I see "CSS: match 7 to 8". I expect to see “CSS: a match from 9 to 10” (again, due to the left and right margins of 0.5 inches).
When 4x6 paper is selected, a portrait is selected, I see "CSS: 2-3 match." This is correct because 4 - (2 * 0.5) = 3. But when the terrain is selected, I see "CSS: Corresponds to 3 - 4" when I expect to see "CSS: Coordinated from 4 to 5".
I do all this in Chrome, File-> Print.
How am I wrong?
source share