@media（最大宽度：1000像素）和@media和屏幕（最大宽度：1000像素）CSS有什么区别

Question

在CSS中，@ media（最大宽度：1000像素）和@media和屏幕（最大宽度：1000像素）之间有什么区别？我在代码中分别尝试了它们，并且它们都做同样的事情

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

和

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

当屏幕宽度小于或等于1000像素时，两者都会对我的网格元素产生相同的效果

如果没有CSS指南，为什么我们会说写和屏蔽CSS指南？

Answer 1

一个简单的解释：

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

就您而言，

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

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

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

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