CSS媒体查询(media query)

来源:转载

前言:一直都有用到媒体查询,但都是只会一点皮毛,没有系统深入的学习过,最近再看一本书,主要讲的就是如何制作响应式web页面,所以今天就简单的做个总结。


一.什么是媒体查询
先看一段简单的媒体查询代码:

@media only screen and (max-width: 600px){ .navside { display: none; }}

上面代码的意思是:当页面尽在屏幕上显示(之所以强调屏幕,是因为除了screen还会有其他类型),且页面的宽度小于等于600px时将侧边栏隐藏。
1.媒体类型
如上代码中的screen。在w3c标准中规定了有4类媒体类型,分别是:all(所有设备),print(打印设备),speech(能够读出页面的屏幕阅读设备,通常供残疾人士使用),screen(除打印设备和屏幕阅读设备以外的所有设备),如果没有指定媒体类型,则默认类型为all
2.媒体特征表达式
如上代码中的max-width。在标准中规定的属性有:width,max-width(最大不超过),min-width(最小不超过),device-width(设备宽度),aspect-ratio(屏幕高宽比),color(颜色),resolution(屏幕的分辨率)等。
注意:媒体查询不仅可以写在样式表中,也可以直接写在样式外链中,如<link rel="stylesheet" media="only screen and (max-width:600px)" href="style.css">


二.媒体查询中的逻辑
1.and(与)关键字,如下代码:

@media (min-width:320px) and (orientation:landscape){ .navside { display: none; }}

在上述代码中,两个条件必须同时满足,即当屏幕宽度不小于320px且手机水平放置时执行
2.,(或),使用(,)分隔符表示或,代码如下:

@media (min-width:320px) ,(orientation:landscape){ .navside { display: none; }}

满足条件中的任何一个则执行
3.not(非),取反操作,代码如下

@media not all and (min-width:320px){ .navside { display: none; }}意思是:not (all and (min-width:320px)),而非(not all) and (min-width:320px)@media not all and (min-width:320px),(color:red){ .navside { display: none; }}意思是:not (all and (min-width:320px)),(color:red),而非not ((all and (min-width:320px),(color:red))

三.媒体查询中的策略
1.顺序

//策略[email protected] (min-width:320px){ .navside { display: none; }}//策略[email protected] (min-width:800px){ .navside { display: none; }}//策略[email protected] (min-width:1024px){ .navside { display: none; }}

在上面的代码中,从后往前匹配,如果遇到width=1000px时,从后往前查找遇到策略2时停止匹配。
2.max-width和min-width,类似分支语句

 //if (width <= 320px)@media (max-width:320px){ .navside { display: none; }}//if (width >= 320px && width <= 1024px)@media (min-width:320px) and (max-width: 1024px){ .navside { display: none; }}//if (width >= 1024px)@media (min-width:1024px){ .navside { display: none; }}

以上内容是关于媒体查询的一个总结,之后会附上一个小例子,希望在之后的开发中,运用的更加熟练。

分享给朋友:
您可能感兴趣的文章:
随机阅读: