@media（最大宽度：1000px）和@media和屏幕（最大宽度：1000px）CSS有啥区别[重复]

Posted 2023-03-06

【中文标题】@media（最大宽度：1000px）和@media和屏幕（最大宽度：1000px）CSS有啥区别[重复]

【英文标题】：What is the difference between @media (max-width: 1000px) and @media and screen (max-width: 1000px) CSS [duplicate]@media（最大宽度：1000px）和@media和屏幕（最大宽度：1000px）CSS有什么区别[重复]

【发布时间】：2020-10-25 22:12:54

【问题描述】：

CSS 中@media (max-width: 1000px) 和@media and screen (max-width: 1000px) 有什么区别？我在我的代码中分别尝试了它们，它们都做同样的事情

 @media and screen (max-width: 1000px) 
    .grid 
       width:100%;      
    

和

@media (max-width: 1000px) 
    .grid 
       width:100%;      
    

当屏幕宽度为 1000 像素或更小时，两者对我的网格元素的效果相同

如果没有 CSS 指南，为什么我们会得到相同的结果？

【问题讨论】：

第一个是无效的语法，但如果你问的是screen and，What is the difference between “screen” and “only screen” in media queries? 的副本：“这几乎与上面的相同，除了你将screen 指定为与other available media types相对，最常见的另一个是print。”

查看我编辑的答案@Aviale

【参考方案1】：

简单解释：

@media 是实际的媒体查询或条件，适用于广泛的元素。现在@media screen 正在告诉媒体专门将条件应用于屏幕。

在你的情况下，

@media screen and (max-width: 1000px) 
    .grid 
       width:100%;      
    

仅适用于最大宽度为 1000 像素的屏幕。

但如果没有“屏幕”一词，两个大括号内的条件不仅适用于最大宽度为 1000 像素的屏幕，而且适用于大多数 所有 元素或视口，最大宽度为 1000px：

@media (max-width: 1000px) 
    .grid 
       width:100%;      
    

【讨论】：

好的，@media (max-width: 1000px) 与添加“屏幕和”有何不同