CSS利用媒体查询控制网页打印部分区域只在网页显示，打印时不出现

如题，需求是需要控制网页打印部分区域只在网页显示，打印时不出现。

实现

利用媒体查询，@media print 定义两个class:

• .print-only是只有打印的时候出现，网页上不显示

• .no-pirnt

  是只有网上上显示，打印的时候不出现指定的div或者元素，例如一些打印的按钮，可以设置成这种情况。

css代码如下：

.print-only {
    display: none;
}

@media print {
    .no-print {
        display: none;
    }
    .print-only {
        display: block;
    }
}