📅 最后修改于: 2023-12-03 15:14:18.813000 🧑 作者: Mango
CSS print landscape is a feature that allows you to modify the orientation of a printed document. By using the landscape option, you can print your document horizontally instead of vertically.
The CSS syntax for enabling landscape printing is as follows:
@media print {
@page {
size: landscape;
}
}
In this code, we use the @media rule to specify that we are targeting print styles only. Then we use the @page rule to define a landscape size for our printed document.
To better understand how this works, let's take a look at an example. Suppose you have a document that is too wide to fit on a single page in portrait mode.
```html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
@media print {
@page {
size: landscape;
}
}
</style>
</head>
<body>
<p>This is an example of a landscape document.</p>
</body>
</html>
```
Here, we've added the CSS code from earlier to our HTML document. Now, when we print our document, it will be in landscape mode, allowing us to fit all of the content on a single page.
The CSS print landscape feature is a handy tool for printing documents that are too wide to fit on a single page in portrait mode. By using the landscape option, you can easily switch the orientation of your printed document and save on paper and ink.