HTML 样式兼容不同设备类型
在项目中遇到在屏幕上显示的效果和打印时显示的效果不同，可以使用media属性来指定用于不同的媒介时使用的样式。
media属性值:
| 值 | 描述 |
| screen | 计算机屏幕显示(默认) |
| tty | 电传打字机以及类似的使用等宽字符网格的媒介 |
| tv | 电视机类型设备（低分辨率、有限的滚屏能力） |
| projection | 放映机 |
| handheld | 手持设备（小屏幕、有限带宽） |
| 打印预览模式/打印页面 | |
| braille | 盲人点字法反馈设备 |
| aural | 语音合成器 |
| all | 适用于所有设备 |
定义和用法
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
浏览器支持
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。
提示：在全屏模式中，Opera 也支持 "projection" 属性值。
使用方式一：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
使用方式二：
<style type="text/css" media="all">
/*通用样式*/
.PrintPage{margin:0px auto;}
.BreakPage{page-break-before:always;}
.HeaderArea,.GridArea,.BottomArea{
margin:5px 0px;
padding:0px;
}
.HeaderArea,.BottomArea{position:relative;overflow:hidden;}
.HeaderElement{position:absolute; display:flex;}
.HeaderElement span{display:block;}
.HeaderElement span[name='showLabel']{min-width:90px; margin-right:5px; text-align:right;}
.HeaderElement span[name='showValue']{flex:1;}
table td{
overflow:hidden;
white-space: nowrap;
}
</style>
<style type="text/css" media="screen">
/*屏幕显示时样式*/
.HeaderArea[print='HeadPrint']{display:none;}
.BottomArea[print='BottomPrint']{display:none;}
.GridAreaTable[print='TablePrint']{margin-top:0; border-top:0}
.first-line-print{display:none;}
.BottomArea[show='BottomShow']{display:''}
#btnTemplateDesign,#btnTemplateInit{display:none;}
</style>
<style type="text/css" media="print">
/* 打印时的样式*/
.buttonDiv{display:none;}
.HeaderArea[print='HeadPrint']{display:''; page-break-before:always;}
.BottomArea[print='BottomPrint']{display:'';}
.GridAreaTable[print='TablePrint']{margin-top:10px; border-top:1}
.first-line-print{display:'';}
.BottomArea[show='BottomShow']{display:none;}
</style>
