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

media属性值:

值 描述
screen 计算机屏幕显示(默认)
tty 电传打字机以及类似的使用等宽字符网格的媒介
tv 电视机类型设备（低分辨率、有限的滚屏能力）
projection 放映机
handheld 手持设备（小屏幕、有限带宽）
print 打印预览模式/打印页面
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>

HTML 样式兼容不同设备类型的更多相关文章

  1. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  2. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  3. 移动端&PC端CSS样式兼容代码

    CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

  4. 【原】迎接微信winphone 5.0 版本的IE10样式兼容

    微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...

  5. 怎么控制表单placeholder属性的样式兼容各大浏览器？

    当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...

  6. CSS hack样式兼容模式收藏

    part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   IE6   IE7   IE8 ...

  7. css样式兼容各个浏览器时的部分总结

    [本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...

  8. 踩过的坑—iphone手机H5样式兼容总结

    对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...

  9. javascript获取行间样式和非行间样式--兼容写法

    style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...

随机推荐

  1. [UE4]C++代码实现播放粒子特效

    转自:http://aigo.iteye.com/blog/2273345 函数参数说明(在GameplayStatics.h中) 将一个粒子放到指定位置上播放: 另一种重载形式: 将一个粒子atta ...

  2. MySQL之 Mysqldump导出数据库

    参数大全 参数说明 --all-databases , -A 导出全部数据库. mysqldump -uroot -p --all-databases --all-tablespaces , -Y 导 ...

  3. SAS 输出内容到HTML

    OPTIONS USER=SASHELP; ODS TAGSETS.HTMLPANEL PATH='F:\'(URL=NONE) FILE='A.HTML'; ODS GRAPHICS ON/IMAG ...

  4. restful 涵义

    REST,即Representational State Transfer的缩写: "表现层状态转化" REST的名称"表现层状态转化"中,省略了主语.&quo ...

  5. U3D学习003——编辑器使用

    1.skybox 原来的render setting 在2017版本中是lighting标签environment中设置: 或者在摄像机对象中添加skybox组件,进行设置. 2.6张图实现自定义sk ...

  6. Zookeeper数据查看工具ZooInspector

    Zookeeper作为常用的集群协调者组件被广泛应用,尤其是在大数据生态圈中: Zookeeper集群存储各个节点信息,包括:Hadoop.Hbase.Storm.Kafka等等: 二.查询ZK数据的 ...

  7. MySQL存储过程中使用SELECT …INTO语句为变量赋值

    使用SELECT …INTO语句为变量赋值 在MySQL存储过程中,可以使用SELECT …INTO语句对变量进行赋值,该语句在数据库中进行查询,并将得到的结果赋值给变量.SELECT …INTO语句 ...

  8. 用ng-style修改元素的color， size等

    1) 在Controller中定义变量myStyle var myStyle={'background-color':'blue'} $scope.myStyle = myStyle; 2) 在HTM ...

  9. Java之ConcurrentHashMap

    由于工作中使用到了ConcurrentHashMap,然后查了一波资料,最后整理如下: 1. 描述: ConcurrentHashMap是在Java1.5作为HashTable的替代选择新引入的,是c ...

  10. 关于springboot

    概念 Spring的优缺点 1. 优点(AOP和IOC简化开发) Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品.无需开发重量级的E ...