html不同设备加载不同样式,HTML 样式兼容不同设备类型(示例代码)

在项目中遇到在屏幕上显示的效果和打印时显示的效果不同，可以使用media属性来指定用于不同的媒介时使用的样式。

media属性值:

值

描述

screen

计算机屏幕显示(默认)

tty

电传打字机以及类似的使用等宽字符网格的媒介

tv

电视机类型设备(低分辨率、有限的滚屏能力)

projection

放映机

handheld

手持设备(小屏幕、有限带宽)

print

打印预览模式/打印页面

braille

盲人点字法反馈设备

aural

语音合成器

all

适用于所有设备

定义和用法

media 属性规定被链接文档将显示在什么设备上。

media 属性用于为不同的媒介类型规定不同的样式。

浏览器支持

所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。

提示：在全屏模式中，Opera 也支持 "projection" 属性值。

使用方式一：

使用方式二：

/*通用样式*/.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;

}

/*屏幕显示时样式*/.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;}

/*打印时的样式*/.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;}