I've got some styles specifically for print, which are being applied correctly with a print media query. The thing is, my layout breaks a bit if you switch to landscape printing, and I'd like to tweak some things for it. Is there any way to define styles for landscape printing?
Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation.
In the context of media queries for responsive design, the most common media feature is width , including min-width and max-width . However, you also have more choices here, such as: height — Pretty much the same as width but for device height. Also takes min-height and max-height to define ranges.
Media Queries offer matching against the device's orientation:
@media print and (orientation: landscape) {
/* landscape styles */
}
@media print and (orientation: portrait) {
/* portrait styles */
}
<style>
@media print {
@page {
size: landscape; /*automatically set to Landscape only*/
}
}
</style>
If you want letting the user to choose between the two ways : portrait/Landscape, do :
<style type="text/css" media="print">
@page {
/* portrait/Landscape */
size: auto;
/*adding some margins to let the title and the date to be displayed*/
margin: 40px 10px 35px;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With