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

    querystring字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析.querystring模块只提供4个方法: querystring.parse querystring.str ...

  2. Socket网络编程(winform)

    [服务器] using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  3. JSP：注册&登录

    数据库:Mysql 除了_id自动增长,其余全是varchar 注册:register.jsp <%@ page language="java" import="j ...

  4. mysql where in形式存储过程如何传递带有单引号的入参

    对于存储过程或者函数,我们通常都有这样的一个需求,传递一个参数,输出一个结果.如:我传递一个账号,返回这个账号所拥有的权限.但是如果这个需求改了,我要传递多个账号,获取这些账号权限,但是账号的个数不限 ...

  5. three.js学习：三维空间下的直线

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. windows 下安装 docker

    1. 使用阿里云的镜像进行安装: http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 2. 安装完成后点击图标 “Dock ...

  7. TestLink 的使用详解

    二.初始配置(设置用户.产品) 1. 用户设置 在TestLink系统中,每个用户都可以维护自己的私有信息.admin可以创建用户,但不能看到其它用户的密码.在用户信息中,需要设置Email地址,如果 ...

  8. StanFord ML 笔记 第一部分

    本章节内容: 1.学习的种类及举例 2.线性回归,拟合一次函数 3.线性回归的方法: A.梯度下降法--->>>批量梯度下降.随机梯度下降 B.局部线性回归 C.用概率证明损失函数( ...

  9. 20165205 2017-2018-2《Java程序设计》结对编程一 第一周总结

    20165205 2017-2018-2<Java程序设计>结对编程一 第一周总结 需求分析 对输入的算式进行计算,要求满足一下条件: 支持整数运算,如2+5,47+7865. 支持多运算 ...

  10. 5.2_k-means案例分析

        k-means案例分析 手写数字数据上K-Means聚类的演示 from sklearn.metrics import silhouette_score from sklearn.cluste ...