HTML 样式兼容不同设备类型
生活随笔
收集整理的這篇文章主要介紹了
HTML 样式兼容不同设备类型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在項目中遇到在屏幕上顯示的效果和打印時顯示的效果不同，可以使用media屬性來指定用于不同的媒介時使用的樣式。
media屬性值:
| 值 | 描述 |
| screen | 計算機屏幕顯示(默認) |
| tty | 電傳打字機以及類似的使用等寬字符網格的媒介 |
| tv | 電視機類型設備（低分辨率、有限的滾屏能力） |
| projection | 放映機 |
| handheld | 手持設備（小屏幕、有限帶寬） |
| 打印預覽模式/打印頁面 | |
| 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 样式兼容不同设备类型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新浪微博开放平台之OAuth2.0认证
- 下一篇： 【前端分享】jQuery.lazyloa