CSS 中的@media print 是干什么用的?

news/2024/9/30 12:31:12 标签: css, 前端

@media print { ... } 是CSS中的一个媒体查询,它专门用于定义当内容被打印到纸张上时应该应用的样式规则。在这个查询块内,你可以设置各种样式,以确保打印输出的内容看起来整洁、专业,并且只包含必要的信息。

在你给出的例子中:

css">@media print {
    header, footer {
        display: none;
    }
}

这段代码的意思是,当网页内容被发送到打印机进行打印时,页面上的所有<header><footer>元素都将被隐藏(即不显示在打印的页面上)。这是通过将这些元素的display属性设置为none来实现的。

这种做法通常很有用,因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息,但在打印版本中,这些信息可能并不必要,甚至可能占用宝贵的页面空间。

此外,你还可以在@media print查询中定义其他样式规则,比如改变字体大小、颜色(尽管打印机通常只能打印单色,但定义颜色是个好习惯,以防将来支持彩色打印)、边距、分页控制等,以确保打印输出的内容既美观又易于阅读。

例如,你可能还想隐藏某些不重要的元素,如广告、侧边栏或仅用于装饰的图片,同时增加标题和段落的字体大小,以及为页面添加页眉和页脚(但这次是在打印样式中自定义的,与网页上的不同)。


http://www.niftyadmin.cn/n/5685104.html

相关文章

Spring - @Import注解

文章目录 基本用法源码分析ConfigurationClassPostProcessorConfigurationClass SourceClassgetImportsprocessImports处理 ImportSelectorImportSelector 接口DeferredImportSelector 处理 ImportBeanDefinitionRegistrarImportBeanDefinitionRegistrar 接口 处理Configuratio…

《动手学深度学习》笔记2.5——神经网络从基础→使用GPU (CUDA-单卡-多卡-张量操作)

目录 0. 前言 原书正文 1. 计算设备 (CPU和GPU) 补充&#xff1a;torch版本cuda报错的解决方案 2. 张量与GPU 3. 存储在GPU上 4. 复制&#xff08;多卡操作&#xff09; 5. 旁注 (CPU和GPU之间挪数据) 6. 神经网络与GPU 小结 0. 前言 课程全部代码&#xff08;pytorc…

《ToDesk 云电脑、易腾云、青椒云移动端体验实测:让手机秒变超级电脑》

前言 科技发展到如今2024年&#xff0c;可以说每一年都在发生翻天覆地的变化。云电脑这个市场近年来迅速发展&#xff0c;无需购买和维护额外的硬件就可以体验到电脑端顶配的性能和体验&#xff0c;并且移动端也可以带来非凡体验。我们在外出办公随身没有携带电脑情况下&#x…

【C++——文件操作】

写入 #include<iostream> #include<fstream> //ofstream所需头文件 using namespace std;int main() {//一打开文件:string str R"(C:\Users\admin\Desktop\新建文件夹\test.txt)";//也可以用C风格字符串//打开文件&#xff0c;如果不存在就创建一…

Llama微调以及Ollama部署

1 Llama微调 在基础模型的基础上&#xff0c;通过一些特定的数据集&#xff0c;将具有特定功能加在原有的模型上。 1.1 效果对比 特定数据集 未使用微调的基础模型的回答 使用微调后的回答 1.2 基础模型 基础大模型我选择Mistral-7B-v0.3-Chinese-Chat-uncensored&#x…

uniapp生物识别示例(人脸识别、指纹识别)

准备工作&#xff1a; mainfest.json设置勾选&#xff1a; 勾选完成后打 App自定义调试基座测试包 示例代码&#xff1a; <template><view class"content"><button v-if"supportSoterAuthenticationArray.includes(facial)" click"…

​IAR全面支持国科环宇AS32X系列RISC-V车规MCU

全球领先的嵌入式系统开发软件解决方案供应商IAR与北京国科环宇科技股份有限公司&#xff08;以下简称”国科环宇”&#xff09;联合宣布&#xff0c;最新版本IAR Embedded Workbench for RISC-V将全面支持国科环宇AS32X系列RISC-V MCU&#xff0c;双方将共同助力中国汽车行业开…

【视频目标分割-2024CVPR】Putting the Object Back into Video Object Segmentation

Cutie 系列文章目录1 摘要2 引言2.1背景和难点2.2 解决方案2.3 成果 3 相关方法3.1 基于记忆的VOS3.2对象级推理3.3 自动视频分割 4 工作方法4.1 overview4.2 对象变换器4.2.1 overview4.2.2 Foreground-Background Masked Attention4.2.3 Positional Embeddings 4.3 Object Me…