您所在的位置：首页>站长学院 > 开发教程 >

@media和@media screen区别你了解么

来源：齐鲁建站栏目：开发教程阅读：日期：2023-03-28

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

先来看看几个关键字：

only：限定某种设备

screen：彩色电脑屏幕，是媒体类型里的一种

and：关键字，连接多个表达式

not：关键字，排除不支持的媒体类型

其他媒体类型：all（所有设备）、braille（盲文）、embossed（盲文打印）、print（文档打印或打印预览模式）、projection（项目演示，比如幻灯）、speech（演讲）、tv（电视）

再来看看使用方法：

@media：CSS在打印机里是有效的

@media screen：CSS在打印机里是无效的

@media print：CSS只在打印设置上有效

具体使用方法如下：

@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;
   }
}