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

Question

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 指南，为什么我们会得到相同的结果？

Answer 1

简单解释：

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

在你的情况下，

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

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

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

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