响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

        下面介绍一下media媒体查询的使用方法

@media only screen and (min-width:1000px){这里写你的css代码}

and后面的声明改css使用与的屏幕尺寸,min-width在前面说过是一个限制的尺寸,这里值当宽度最小达到1000px启用改media查询的css样式,就是说在1000px以上使用的样式

@media only screen and (max-width:700px){这里写上css样式代码}

这段的max-width和上述类似,规定了最多700px使用css,表述在700px一下使用,那么问题来了,在700-1000px直接怎么响应呢?

@media only screen and (min-width:700px) and (max-width:999px){我是书写css的区域}

这段代码则响应了700-1000px之前的样式,多个样式屏幕使用同一的样式,多加一个and (屏幕尺寸的样式)就可以搞定,

上述代码表面最小是700和最大999直接使用改代码!

        至此,你有发现问题了没有?做项目时候我们总不能把大量的css代码都写进这么憋屈的一个花括号内吧,当然,这里也给说一下如何移入外部的css方式!

<link rel="stylesheet" href="index1.css" media="screen and (min-width:1201px)"/>
<link rel="stylesheet" href="index2.css" media="screen and (max-width:1200px)" />

    之前我们引入外部css使用的是link这里我们同样使用这个标签来引入外部的css样式表,在标签后面增加属性media就ok,media的值和上述的类似使用"screen and (屏幕尺寸要求)"这样就实现了外部引入的css也完美的使用了media的响应式!!!