写html这么久了,今天才发现link标签还有个media参数,赶紧把它补回来,虽然现在没有用到,但是不能不知道它

定义和用法

media 属性规定被链接文档将显示在什么设备上。

media 属性用于为不同的媒介类型规定不同的样式。

如果网页需要在不同终端设备上显示,比如打印时显示不同的排版格式,那就需要使用media参数了,比如:

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

上面的代码意思是说,当不打印的时候,使用media="screen"来显示网页,当打印的时候就调用printstyle.css来显示网页。

media的所有属性如下:

screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

如果网页打印时与电脑上显示的是一个样式,那么你link里的media参数,可取值screen,也可以取值all。

HTML link标签media参数的更多相关文章

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

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

  2. (学习笔记)HTML的<link>标签

    在HTML中<link>标签用于定义文档与外部资源的关系. <link>标签只存在于head部分. <head> <link rel="styles ...

  3. 【131031】rel 属性 -- link标签中的rel属性,定义了文档与链接的关系

    此属性通常出现在a,link标签中 属性值 Alternate -- 定义交替出现的链接 Alternate 属性值 -- alternate是LinkTypes的一个值,网页设计者可以通过此值,设计 ...

  4. (转)Ratchet教程:meta与link标签

    原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签           ...

  5. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  6. 使用link标签进行预加载

    概述 html中的link标签一般用来引入css文件.但是也可以通过rel属性来进行预加载.本文记录下相关方法,供以后开发时参考,相信对其他人也有用. 参考资料: mdn 通过rel="pr ...

  7. <link>标签的rel属性全解析

      <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...

  8. link标签的rel属性

    <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,< ...

  9. 移动端——link标签

    meta标签中提到了部分功能要结合link标签进行使用,link标签主要是存放CSS文件的地方,同时还有一些专属的移动端设置. <meta http-equiv="Content-Ty ...

随机推荐

  1. Swift 3.0 字符串、数组、字典的使用

    1.字符串 string func stringTest() -> Void { // 字符串 let str1 = "yiyi" let str2 = "2222 ...

  2. Maven3在Eclipse上安装插件

    eclipse 安装插件的方式最常见的有两种: 1. 一种是在线安装,这貌似是用的最多的,就是:Help -->  Install New Software,然后输入 HTTP 地址来安装,但有 ...

  3. 论移动端Hybid开发

    以下内容code地址:https://github.com/wytings/Hybrid 背景:公司业务的发展和开发需求升级,我们需要Hybrid了.市面上有很多开源的Hybrid框架给我们直接使用, ...

  4. Android自定义控件系列(二)—icon+文字的多种效果实现

    转载请注明出处:http://www.cnblogs.com/landptf/p/6290810.html 今天给大家带来一个很简单但是很常用的控件ButtonExtendM,在开发中我们经常会用到图 ...

  5. ruby操作mongo DB

    web自动化中,对操作日志功能进行验证(操作日志存在mongoDB中). 为了避免前面操作产生的日志影响结果校验,我们需要先清除之前的所有操作日志. require 'mongo' host = '1 ...

  6. 【Java每日一题】20170113

    20170112问题解析请点击今日问题下方的"[Java每日一题]20170113"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  7. C# 连接 Access 数据库

    c#连接Access 数据库需要System.Data, System.Data.OleDb using System.Data using System.Data.OleDb public OleD ...

  8. nginx如何配置网页错误页面

    首先要在http模块中加入 fastcgi_intercept_errors on; 其次要在server模块中加入 error_page 403 404 /40x.html; location = ...

  9. 安装用户脚本的福音:Tampermonkey(油猴)

    一直都知道网络的强大,NB的程序员大牛潜伏在我们身边.但是一直以来,如果想使用的一些特殊用途的浏览器插件都无法安装,今天被大神级的师兄给秒到了,原来这世上还有一个免费的用户脚本管理器,有了用户脚本管理 ...

  10. android 沉浸式状态栏的实现

    本文介绍一种简单的实现沉浸式状态栏的方法,要高于或等于api19才可以. 实现android沉浸式状态栏很简单,添加代码两步就可以搞定. 一.在activity中添加 getWindow().addF ...