@media(最大宽度:1000px)和@media和屏幕(最大宽度:1000px)CSS有什么区别

Question

CSS中的@media(最大宽度：1000px(与@media和屏幕(最大宽度：1000px(有什么区别？我在我的代码中分别尝试了它们，它们都做同样的事情

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

和

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

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

为什么CSS指南说如果没有它，我们就会得到相同的重用

？

Answer 1

一个简单的解释：

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

在您的情况下，

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

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

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

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