在项目中遇到在屏幕上显示的效果和打印时显示的效果不同，可以使用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. Postgres安装

    yum install zlib-devel gcc make #创建用户和组groupadd postgresuseradd -g postgres postgres mkdir -p /usr/l ...

  2. windows下安装、卸载mysql服务

    将下载下来的mysql解压到指定目录下(如:d:\mysql)安装服务在命令行输入d:\mysql\bin\mysqld -installnet start mysql卸载服务在命令行输入net st ...

  3. 迭代器&可迭代对象

    迭代器 能够被next调用, 并不断返回值的一个对象惰性排序, 一次只获取一个数据, (占用一个空间)迭代器可以遍历无限量的数据 特点: 1.惰性序列, 节省内存 2.遍历使用next, 方向不可逆 ...

  4. BCGcontrolBar(八) Ribbon图标变换

    点击前 点击后 CBCGPRibbonButton *pRibbonBtn=NULL; pRibbonBtn=DYNAMIC_DOWNCAST(CBCGPRibbonButton,m_pFrame-& ...

  5. visual studio 版本管理从tfs迁移到svn

    1.首先要解除解决方案的tfs绑定 清除(删除)项目下的所有版本控制文件,这些文件有:*.vssscc,*.vspscc 删除这些版本控制文件比较简单,搜索这些后缀的文件,删除即可. 修改项目的解决方 ...

  6. CentOS7.4安装部署openstack [Liberty版] （二）

    继上一篇博客CentOS7.4安装部署openstack [Liberty版] (一),本篇继续讲述后续部分的内容 一.添加块设备存储服务 1.服务简述: OpenStack块存储服务为实例提供块存储 ...

  7. linux：Apache服务器相关

    安装apache服务器 (推荐方法) 安装前清确保已安装gcc.g++ 1)安装依赖包apr-1.6.5.tar.gz,下载地址:http://apr.apache.org/download.cgi ...

  8. 3-scala高级

    1.模式匹配 //①简单表示: sign = ch match { case '+' => 1 case '-' => -1 case '_' => 0 } //②守卫:(case中 ...

  9. 点击复制内容到剪切板（clipboard）

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

  10. linux的系统调优

    例1:找出前当系统中,CPU负载过高的服务器? 服务器1: load average: 0.15, 0.08, 0.01 1核 服务器2: load average: 4.15, 6.08, 6.01 ...