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

      Shiro 权限注解:   Shiro 提供了相应的注解用于权限控制,如果使用这些注解就需要使用AOP 的功能来进行 判断,如Spring AOP:Shiro 提供了Spring AOP 集成用于 ...

  2. POI实现数据导入功能

    一.导入过程(基本就是导出的逆向过程) 1.存在一个包含数据的Excel文件 2.将文件作为参数传到服务器 3.服务器解析文件,并将数据封装成实体对象 4.将对象持久化更新到数据库 5.刷新页面导入成 ...

  3. dataset to list

    http://www.c-sharpcorner.com/UploadFile/ee01e6/different-way-to-convert-datatable-to-list/ http://ww ...

  4. Navicat Premium 将sqlserver 数据库 导入mysql 中

    1.新建 MySQL 数据库  2.  3 4 5 6 7 8 9一直点击下一步 10 成功

  5. jquery遍历指定元素下的img图片改变其路径

    $(".jieshao img").each(function (i) { $(this).attr("src", "manager/" + ...

  6. Xcode 如何导入IOS项目

    前言:基于mac上如何导入ios项目的文章,手机自动化项目需要进行手机元素定位,前提是导入IOS项目 1.安装Xcode 到官网下载mac版Xcode:当前使用版本Version 7.3.1 http ...

  7. WPF 我的初学必备技能

    0.控件 0.1.内容控件(Content Controls) 0.2.条目控件(Items Controls) 0.3.文本控件(Text Controls) 0.4.范围控件(Range Cont ...

  8. vue搭配axios踩坑

    客户端项目中有一个小需求“我的卡券”,有单独入口,所以综合考虑之后,采用了vue来实现,因为是初次使用,导致了选型不当,先用了SUI-Mobile来搭建页面,当决定使用vue的时候,页面也搭建完毕了, ...

  9. py库： pymysql、 json （mysql数据库）

    数据库查询结果,用json返回: #连接数据库 import pymysql print(pymysql.VERSION) conn = pymysql.Connect(host='localhost ...

  10. IBeacon协议分析

    IBeacon协议分析 跳转至: 导航. 搜索 对于一个UUID是E2C56DB5-DFFB-48D2-B060-D0F5A71096E0, major是0, minjor是0的iBeacon,此时的 ...