CSS是一种用于样式设计的语言，可以让我们轻松地设置网页的颜色、排版和布局等样式效果。另外，CSS也可以设置打印页面的样式，以便打印出来的内容更加美观、易读和专业。本文将详细介绍如何使用CSS设置打印页面，并讲解CSS中media查询的使用方法。

设置打印样式

在CSS中，我们可以使用@media规则来设置不同媒体类型下的样式。其中，打印媒体可以通过@media print来设置。

CSS打印样式的设置方法

以下是设置CSS打印样式的步骤：

在CSS文件中使用@media print{}，括号内填写需要设置的打印样式。示例代码如下：

@media print {
  /* 设置打印页面的样式 */
  body {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none;
  }
  /* 修改需要打印的元素样式 */
  .print {
    font-size: 16px;
    font-weight: bold;
  }
}

在HTML文件中引入CSS文件。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS打印样式示例</title>
  <link rel="stylesheet" type="text/css" href="print.css">
</head>
<body>
  <div class="no-print">这是不需要打印的内容</div>
  <div class="print">这是需要打印的内容</div>
  <button onclick="window.print()">点击进行打印</button>
</body>
</html>

通过上述代码，在打印页面时，添加了@media print{}规则，可以控制需要打印的元素的样式，同时也可以隐藏不需要打印的元素。点击打印按钮时，会打印出只含有需要打印元素的页面。

示例1：设置打印样式

以下是一个设置打印样式的示例代码：

@media print {
  body {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }
  .no-print {
    display: none;
  }
  .print {
    font-size: 16px;
    font-weight: bold;
  }
}

值得注意的是，其中“@media”规则是必须的，通过选择打印媒体，可以针对不同的输出媒介设置不同的样式。

工作原理

在上面的代码中，“@media print {}”告诉浏览器，只有在打印时才应用这些CSS规则，而不是在屏幕和其他媒介上。所以，在页面上使用@media print{}规则修改样式后，只有在打印界面或者打印预览时才能看到效果。

CSS中media查询的使用方法

CSS中的@media规则还可以进行响应式设计，通过设定屏幕宽度、高度、分辨率等参数，设定不同大小设备显示不同的样式。以下是一个响应式CSS的示例。

利用@media实现响应式CSS

示例代码如下：

@media only screen and (max-width: 768px) {
  /* 手机尺寸大小使用 */
  body {
    font-size: 12px;
    line-height: 1.3;
  }
  .sidebar {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  /* 平板和电脑尺寸大小使用 */
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  .sidebar {
    display: block;
  }
}

以上代码实现了在不同屏幕分辨率下，网页的字体大小、行高等效果都不同，从而实现了响应式设计。

示例2：使用@media实现响应式CSS

以下是一个实现响应式设计的示例代码：

@media only screen and (max-width: 768px) {
  /* 手机横屏时使用的样式 */
  .container {
    width: 100%;
    max-width: 100%;
  }
  .sidebar {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* 平板和电脑时使用的样式 */
  .container {
    width: 95%;
    margin: 0 auto;
  }
  .main {
    width: 70%;
    float: left;
  }
  .sidebar {
    width: 25%;
    float: right;
    display: block;
  }
}

@media only screen and (min-width: 1024px) {
  /* 大屏幕电脑使用的样式 */
  .container {
    width: 95%;
    margin: 0 auto;
  }
  .main {
    width: 60%;
    float: left;
  }
  .sidebar {
    width: 30%;
    float: right;
    display: block;
  }
}

工作原理

前面的示例代码中只有“screen”命令。它告诉浏览器，如果当前设备是一个屏幕显示器，我们就应用它所包含的规则。如果是打印出来的页面或者其他设备，则不应用。

“only”关键字表示只有设备类型符合当前规则才应用。设备类型可以是screen、print、speech、tty、tv和projection等。例如，一个print关键字的规则表示只有打印出来的时候应用。

关于media，总的来说就这么多了，值得一提的是，CSS中media查询所涉及的属性广泛，层层递进，需要建立特定的系统、动态找出通用的方案。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简单介绍CSS设置打印页面的方法及css里media的使用 - Python技术站

简单介绍CSS设置打印页面的方法及css里media的使用

设置打印样式

CSS打印样式的设置方法

示例1：设置打印样式

工作原理

CSS中media查询的使用方法

利用@media实现响应式CSS

示例2：使用@media实现响应式CSS

工作原理

相关文章