Warum sind Druckbreite-Medienabfragen falsch?

Ich versuche @media print zusammen mit min-width und max-width zu verwenden, um das aktuell ausgewählte Papierformat zu optimieren, um sowohl Normalpapier (zB Letter-Format) als auch Foto-Papier (normalerweise 4x6) zu drucken. . Die Medienabfragen scheinen jedoch nicht korrekt ausgewertet zu werden.Warum sind Druckbreite-Medienabfragen falsch?

Hier ist ein Beispiel meiner 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>

Hier ist ein Ausschnitt aus meiner CSS-Datei:

@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" 
    } 
}

ich die für jede Breite bis zu 1 bis 2 Zoll breit sind.

Wenn 8,5x11 Papier, Porträt ausgewählt ist, sehe ich "CSS: Matched 5 bis 6". Ich würde erwarten, "CSS: Matched 7 bis 8" wegen der 0,5-Zoll-Marge zu sehen.

Wenn 8,5x11 Papier, Landschaft ausgewählt ist, sehe ich "CSS: Matched 7 bis 8". Ich erwarte "CSS: Matched 9 to 10" (wieder wegen der linken und rechten Ränder von 0.5in).

Wenn 4x6 Papier, Porträt ausgewählt ist, sehe ich "CSS: Matched 2 bis 3". Das ist richtig, weil 4 - (2 * 0.5) = 3. Aber wenn Landschaft ausgewählt ist, sehe ich "CSS: Matched 3 to 4", wenn ich "CSS: Matched 4 to 5" erwarten würde.

Ich mache das alles in Chrome, Datei-> Drucken.

Was mache ich falsch?

Quelle

2014-09-17 William Hertling

Nur um klar zu sein, das Problem ist, dass die Medienabfrage scheint immer für eine viel kleinere Seite als die eigentliche Seite sein. –

haben Sie versucht, die Ränder zu entfernen? – dippas

Haben Sie versucht, einen CSS-Re-Set zu verwenden? – GibboK

In der Regel wird dies auf Ränder, Ränder oder Auffüllung zurückzuführen sein.

Entfernen Ränder und Verwendung:

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

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

oder fügen Breite/Höhe für Ränder/padding/Grenzen ist eine andere Lösung.

Quelle

2014-11-04 09:03:47 ablueman

Warum sind Druckbreite-Medienabfragen falsch?

Antwort

Verwandte Themen