在网站自适应设计中,@media与@media screen是经常会用到的css代码,其功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

@media与@media screen区别


@media与@media screen两者在电脑&手机设备上没有区别,但@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,就用@media;否则,就用@media screen。

不过这只是笼统的做法,其实如果把screen换为print,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效!

@media语法


以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式,如果表达式为真,则应用样式。
 

@media (max-width: 600px) {
	.class1 {
    	​background: #fff;
  	}
}
@media screen and (max-device-width: 600px) {
	.class2 {
		​background: #ccc;
	}
}
@media only screen and (device-aspect-ratio:4/3){
	.class3 {
		​background: #eee;
	}
}

max-width 是目标显示区域的宽度,例如,浏览器宽度。
max-device-width 是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备,例如,设备屏幕长宽比为4:3、16:9或16:10。

媒体查询media还可以作为属性在 link标签中使用:

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是:当屏幕的宽度大于600px且小于800px时,应用style.css文件。

知识拓展

@media only screen and

only:限定某种设备。
screen:彩色电脑屏幕,是媒体类型里的一种。
and:关键字,连接多个表达式。
not:关键字,排除不支持的媒体类型。
其他媒体类型:all(所有设备)、braille(盲文)、embossed(盲文打印)、print(文档打印或打印预览模式)、projection(项目演示,比如幻灯)、speech(演讲)、tv(电视)。
 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐