How to create a printable web page using CSS media queries?-CSS Tutorial-php.cn

How to create a printable web page using CSS media queries?

WBOY

Release： 2023-09-10 08:21:02

forward

1017 people have browsed it

如何使用 CSS 媒体查询创建可打印的网页？

We can create a printable web page and use the CSS media query print property @media print to control the style in the print preview of the page. @media print is a CSS media query that allows us to add page styles to the print preview page of any web page. Using this feature we can create printable web pages by specifying the "visibility" of HTML elements as "visible" or "hidden" given a media query, we can also add what we want in the print preview screen Any other style @media print query.

grammar

@media print {
   /* CSS Styles here */
}

Copy after login

Here, @media print is a CSS media query that we will use to add styles to the print preview page.

Example 1

In this example, we will display the content of the "p" tag in the print preview of the web page by setting the "visibility" to "visible" in the @media print CSS query.

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: visible;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Copy after login

Example 2

In this example, we will hide the content of the "p" tag in the print preview of the web page by setting the "visibility" to "hide" in the @media print CSS query.

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: hidden;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Copy after login

in conclusion

In this article, we learned about the @media print CSS media query and used it to create printable web pages with the help of two different examples. In the first example, we show the content of the "p" tag in the print preview page, and in the second example, we hide the content of the "p" tag in the print preview page.

The above is the detailed content of How to create a printable web page using CSS media queries?. For more information, please follow other related articles on the PHP Chinese website!