zoukankan      html  css  js  c++  java
  • 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-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>
  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/wind-wang/p/6902759.html
Copyright © 2011-2022 走看看