媒体类型

一、媒体类型：常用的三种为：all，print和scree

二、媒体类型引用方法：link标签，xml方式，@import和css3新增的@media四种

1. link方法：

link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。例如：

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

2.xml方式：
　　xml方式引用媒体类型和link引入媒体类型极为相似，也是通过media属性来指定的。

 <?xml-stylesheet rel="stylesheet" media="screen" href="css.css"?>

3.@import方式：

　　@import是用来引用样式文件方法之一，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式：

　　注意：@import必须置于<style>标签或者css文件首行，否则该语句将会被忽略

　　1.在样式中(即在css文件中)@import调用另一个样式文件，例如：

@import url('css.css') screen and (max- 500px);

    2.在<style></style>标签中引入(在IE6和IE7中不被支持)，例如：

<style>
        @import url('css.css') screen and (max- 1000px);
    </style>

4.media方式

　　@media是CSS3中新引进的一个特性，称为媒体查询。在页面中也可以通过这个属性来引　　入媒体类型。@media引入媒体类型和@import有点类似，也具有两种方式：

　　1.在样式中引入媒体类型

@media screen {
    /*选择器{*/
        /*样式代码*/
    /*}*/
}

    2.使用@media引入媒体类型的方式也是在<style>中引用

<style>
        @media screen {
            /*选择器{*/
                    /*样式代码*/
                /*}*/
                }
    </style>

@import和link的区别

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，详解请看此文章https://www.cnblogs.com/my--sunshine/p/6872224.html)
link引入的样式权重大于@import引入的样式。

结论：强烈建议使用link标签，慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

三、媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />

转换成css中的写法为：

@media screen and (max- 600px) {
        选择器 {
            属性：属性值；
        }
    }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。

逻辑思维题：有7克、2克砝码各一个，天平一只，如何只用这些物品三次将140克的盐分成50、90克各一份？

第一次， 将盐分为两个 70克， 取出其中一份；
第二次， 利用两个砝码称出9克；
第三次， 利用9克盐和2克砝码称出11克；
于是称量出20克， 倒入另一份70克中， 获得50克， 90克。