时间戳

首页 > 解决方案 > @media (max-width: 1000px) 和 @media and screen (max-width: 1000px) CSS 有什么区别

html - @media (max-width: 1000px) 和 @media and screen (max-width: 1000px) CSS 有什么区别

问题描述

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 指南说要编写和筛选？

标签： htmlcssmedia-queries

解决方案

一个简单的解释：

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

在你的情况下，

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

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

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

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

推荐阅读