怎样使用 css 的@media print控制打印

怎样使用 css 的@media print控制打印?

<HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD>
<BODY> <style media="print">//这表示是在打印时的样式 .noprint { display: none;font-size:19px;COLOR: blue; } </style>
<style media="screen"> //这表示是在屏幕显示时的样工 .print {font-size:19px;COLOR: red; } </style>
<body> <span class="print" >打印部分</span><br><br><Br> <span class="noprint" >不打印,但可以看部分</span> </BODY> </HTML>

==================================================================== @media版本:CSS2  兼容性:IE5+
语法:
@media sMedia { sRules }
说明:
sMedia :  指定设备名称。请参阅附录:设备类型 sRules :  样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。
示例:
// 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } }
// 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }

=====================================================================

Media Types 设备类型
Media Type 设备类型 CSS Version 版本 Compatibility 兼容性 Description 简介 all CSS2 IE4+ 用于所有设备类型 aural CSS2 NONE 用于语音和音乐合成器 braille CSS2 NONE 用于触觉反馈设备 embossed CSS2 NONE 用于凸点字符(盲文)印刷设备 handheld CSS2 NONE 用于小型或手提设备 print CSS2 IE4+ 用于打印机 projection CSS2 NONE 用于投影图像,如幻灯片 screen CSS2 IE4+ 用于计算机显示器 tty CSS2 NONE 用于使用固定间距字符格的设备。如电传打字机和终端 tv CSS2 NONE 用于电视类设备

时间: 2024-10-05 17:28:45

怎样使用 css 的@media print控制打印的相关文章

专为控制打印设计的CSS样式

来源:http://ourjs.com/detail/54d1ef3e232227083e000026 大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距. 为打印机而不是屏幕设计的样式 1 /* 样式将只应用于打印 */ 2 @media print { 3 4 5 } 也可通单独的CSS文件, 设置

jquery 利用CSS 控制打印样式

一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />  用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media=&quo

响应式设计的核心CSS技术Media(媒体查询器)

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie--><meta name="viewport" content="width=device-width, initial-scale=1"><!--得到媒体查询屏幕宽度,缩放比例--> 准备

css -- 运用@media实现网页自适应中的几个关键分辨率

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢? 先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是 768. 992.1200.当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的.为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>

生活在别处——“Samsung Cloud Print”云打印体验

据工信部发布的数据信息显示,截至8月底,我国移动互联网用户总数已达9.46亿户规模,其中手机上网总数超过9亿户.移动互联网用户规模的不断扩大,进一步证明拥抱移动互联网已成为不可扭转的趋势,也是各互联网设备及平台的全新机会. 云打印技术是一种基于这样的背景而诞生的新型打印方式,其依托云计算与大数据.移动终端设备等特点,使得用户可实现随时随地的打印需求.在最近2年的发展历程中,这种云打印方式因为具备便捷.高效.不受时间地域限制等优点,日趋成为商务市场的绝佳伴侣,三星"Samsung Cloud Pr

如何通过css的media属性,适配不同分辨率的终端设备?

如何通过css的media属性,适配不同分辨率的终端设备,示例如下: <!DOCTYPE html> <html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" conten

用js代码控制打印网页

有关网页打印,可以使用的方法有:"1.点击鼠标右键,选择打印预览,执行打印:2.按键盘上的[print sc sysrq]按钮":还有打印当前网页的方法就是,用相关代码来实现,这里用到的是js:其实用js打印网页很简单,最为重要的就是print()这个函数. 但是简单也不要掉以轻心,不同地方用到,处理方式也需要注意,不然也会得到一些自己不想的结果. 1.打印整个网页的内容: window.print();  2.打印指定id/class的网页内容:     <script>

【html】学习记录-CSS的media queries属性

使用media queries属性可以根据浏览器的宽度自动选择激活需要的CSS定义:         其基本格式如下: @media screen and (min-width: 600px){ /* 即当屏幕宽度大于等于600px时触发此CSS定义 */ ... } @media screen and (max-width: 599px){ /* 即当屏幕宽度小于等于599px时触发此CSS定义 */ ... } 示例: <div class="container"> &

Bootstrap -- css的media属性

下面一段代码是实现:设备最大宽度为767px,当设备宽度大于767px背景色就是#000,否则就是#f00,代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g