HTML 样式兼容不同设备类型

最新推荐文章于 2024-11-02 12:01:00 发布

转载最新推荐文章于 2024-11-02 12:01:00 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wind-wang/p/6902759.html

本文介绍了如何使用CSS的media属性来区分屏幕显示和打印时的不同样式。通过设置特定的媒体类型，如screen和print，可以实现网页在不同媒介上的最佳展示效果。

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