在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式。这样使得文档更有得于打印,如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。

<link href="styles/main.css" rel="stylesheet" type="text/css" media="screen" />

<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />

<link href="main.css" rel="stylesheet" type="text/css" media="all'/>

下边是media标签的10个值,可见常用的并不多。当没有media标签时,默认为media="all"。

  1. all-- 用于所有设备类型
  2. aural-- 用于语音和音乐合成器
  3. braille-- 用于触觉反馈设备
  4. embossed-- 用于凸点字符(盲文)印刷设备
  5. handheld-- 用于小型或手提设备
  6. print-- 用于打印机
  7. projection-- 用于投影图像,如幻灯片
  8. screen-- 用于计算机显示器
  9. tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
  10. tv-- 用于电视类设备
       在上边引用css样式时,我们引用了两次。我们完全可以引用一个css样式来达到我们的目的,这样也可以提高css样式加载速度,实现代码如下:

    /* 所有media标签 */

    CSS代码
        @media all  { 
                       body{ font:12px; width:100%;} 
             }

    @media print  
        {  
            body{ font:14px; width:595px;}   /* 用于打印时将宽度设置为595px(A4) */  
        }

以上media标签是css中的标准语法,所有浏览器都支持media标签,但下面的写法出IE6\7\8 以为的浏览器都支持

CSS代码

@media all and (min-width: 1001px) {  
      #sidebar ul li a:after {  
        content: " (" attr(data-email) ")";  
        font-size: 11px;  
        font-style: italic;  
        color: #666;  
      }  
    }  
      
    @media all and (max-width: 1000px) and (min-width: 700px) {  
      #sidebar ul li a:before {  
        content: "Email: ";  
        font-style: italic;  
        color: #666;  
      }  
    }  
      
    @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {  
      #sidebar ul li a {  
        padding-left: 21px;  
        background: url(../images/email.png) left center no-repeat;  
      }  
    }

html 中的media属性的更多相关文章

  1. html:<link> 标签中的 media 属性

    HTML <link> 标签的 media 属性 定义和用法 media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. media属性值 ( ...

  2. 怎样通过css的media属性,适配不同分辨率的终端设备?

    怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...

  3. css中的media

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  4. media属性

    media=“screen”是什么意思?? media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的. 该属性用于规定目标 URL 是为特殊设备(比如 iPhone).语音或打印媒介设计的 ...

  5. 让IE6、7、8兼容@media属性

    通常做页面适配的时候,经常会用到@media属性,对不同屏幕范围内的元素设置不同的样式.但是@media属性不兼容IE8及IE8以下的浏览器 解决方法: 直接在页面中引入respond.src.js即 ...

  6. html中的事件属性

    Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...

  7. [转载]在网页中插入media,RealPlayer等控件

    [转载]在网页中插入media,RealPlayer等控件 (2012-11-02 20:27:43) 转载▼ 标签: 转载   原文地址:在网页中插入media,RealPlayer等控件作者:Mo ...

  8. http请求头中的content-type属性

    在HTTP请求中,我们每天都在使用Content-Type来指定不同格式的请求信息,但是却很少有人去全面了解Content-Type中允许的值有多少,因此这里来了解一下Content-Type的可用值 ...

  9. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

随机推荐

  1. threejs Object的点击(鼠标)事件(获取点击事件的object)

    objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...

  2. WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

    只要你用 XAML 写代码,我敢打赌你一定用各种方式使(nuè)用(dài)过 Grid.不知你有没有在此过程中看到过 Grid 那些匪夷所思的布局结果呢? 本文将带你来看看 Grid 布局中的 Bu ...

  3. ASP.NET Core 中的SEO优化(3):自定义路由匹配和生成

    前言 前两篇文章主要总结了CMS系统两个技术点在ASP.NET Core中的应用: <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET ...

  4. JAVA验证身份证号码是否合法

    package com.chauvet.utils; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...

  5. cv.Mat 与 .txt 文件数据的读写操作

    1.按OpenCV格式实现的 .txt 文件读写 可以用 cvSave 和 cvLoad 实现,格式和 .xml/.yml 的差不多,不过如果专用与 OpenCV 的数据读写,还是用  .xml/.y ...

  6. iOS客户端打包自动集成weex方案

    我司在2017年已经部分使用weex开发,然而开发weex 的人都知道,在前端开发完成之后需要集成到 安卓和iOS 各个app 之中.每次修改都要重新copy给各个app 负责人去打包,因此这是一种重 ...

  7. .NET类库

    1.如何让发布的C#的DLL类库中的方法带有注释说明 一个类库让第三方引用时,默认情况下生成类库时不携带注释,所以别人引用这个类库时就不是很方便理解类方法的作用和每个参数的含义,若是能携带方法的说明注 ...

  8. Youtube 视频下载

    Youtube 视频下载 由于特殊原因,需要下载 Youtube 的视频. https://www.clipconverter.cc/

  9. Python——基础知识

    1. 运行Python文件 python(空格)文件路径  回车 2. 注释 (1)单行注释:# #注释内容 print('abc') #abc print("abc") #abc ...

  10. git 清除本地无效的分支

    远程服务器的分支已经删掉了,但是本地分支还存在 $ git fetch -p 如果不行,使用下面的指令 $ git remote prune origin