在项目中遇到在屏幕上显示的效果和打印时显示的效果不同，可以使用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. CyclicBarrier循环屏障相关

    简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会 ...

  2. mysql 5.7主从库复制设置

    先要修改配置文件,重启mysql服务 log-bin= mysql-binlog # 打开二进制日志 ,最好放在不同的硬盘上,减小 IO 消耗 expire_logs_day= # 设置二进制日志保存 ...

  3. 轻型DNS服务器dnsmasq

    源码安装 源码下载地址 apt 安装 apt install dnsmasq 编辑配置 vim /etc/dnsmasq.conf resolv-file=/etc/resolv.dnsmasq.co ...

  4. ScrollView嵌套RecyclerView、ScrollView嵌套Listview、ScrollView嵌套各种布局，默认不在顶部和回到顶部的解决方法；

    如果: ScrollView.scrollTo(0,0): ScrollView.fullScroll(View.FOCUS_UP) : ScrollView.smoothScrollTo(0, 0) ...

  5. RxJava响应式编程，入门的HelloWorld；

    RxJava核心就是异步,它也被称之为响应式编程:最大的优势就是随着程序逻辑变得越来越复杂,它依然能够保持简洁. Rxjava真的是让人又爱又恨,因为它的线程切换和链式调用真的很好用,但是入门却有点难 ...

  6. MySQL表中的数据类型

    数据类型:在表中数据类型主要是限制字段必须以什么样的数据类型传值. 一 整型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT总共有五种,name我们一般用到的也就 ...

  7. ASCII、Unicode和UTF-8

    转自廖雪峰的官方网站:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138 ...

  8. 【Selenium-WebDriver自学】Log4J的设置（十五）

    ==================================================================================================== ...

  9. 初识IP基础分类、CIDR

    IP地址概念 IP(IPv4)地址是一个32位的二进制数,通常被分割为4个“8位二进制数”(也就是4个字节).IP地址通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~2 ...

  10. django---单表操作之展示书籍列表

    下面使用python console对数据库进行增删改查 下面我们来举个例子在页面上展示记录 结果: 注意html里面变量的写法 {% for book in book_list %} <tr& ...