HTML 样式兼容不同设备类型

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

转载于:https://www.cnblogs.com/wind-wang/p/6902759.html

HTML 样式兼容不同设备类型相关推荐

webpack：全局变量、图片处理、样式兼容
文章目录 webpack:全局变量.图片处理.样式兼容前情回顾全局变量图片处理(三种方式) 模块化样式兼容性 webpack:全局变量.图片处理.样式兼容前情回顾装载器loader(加载) ...
ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
bootstrap和css样式兼容（ie、360、qq）不同浏览器的解决办法
一.作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题--兼容性. 开发者在前端开发,调试的时候,使用的基本都是谷歌.火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器仍 ...
踩过的坑—iphone手机H5样式兼容总结
对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...
css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题
上次关于css滚动条样式的文章<美化css滚动条样式,就这么简单>,不够完美不兼容IE.火狐浏览器,但今天这篇文章可以完美解决这个问题,用到了jquery插件jquery.mCustomS ...
iphoneX样式兼容
// 1.viewport meta 标签增加属性viewport-fit=cover // 2.body元素增加样式 body { padding-bottom: constant(safe-are ...
兼容ie6css怎么设置,CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
网页布局设计技术迄今为止主要有:table表格布局,DIV+CSS布局以及层布局.目前的网页布局设计领域主流是以DIV+CSS布局为主,table表格布局和层布局为辅.另外我还要告诉你一个秘密,那就是 ...
backgroud背景色样式兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
【微信小程序开发】IOS与安卓样式兼容问题
1.margin在IOS中失效在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距. 2.fixed定位问题整 ...

HTML 样式兼容不同设备类型

HTML 样式兼容不同设备类型相关推荐

最新文章

热门文章