0

What is the difference between @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS? I tried them out seperately in my code and they both do the same exact thing

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

and

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

Will both have the same effect on my grid element when the screen width is 1000px or less

Why do CSS guidelines say to write and screen if without it we get the same reuslt?

Aviale
  • 117
  • 1
  • 5
  • 2
    The first is invalid syntax, but if you’re asking about `screen and`, duplicate of [What is the difference between “screen” and “only screen” in media queries?](https://stackoverflow.com/a/8595600/4642212): _“This is almost identical to the above except you are specifying `screen` as opposed to the [other available media types](https://www.w3.org/TR/mediaqueries-4/#media-type), the most common other one being `print`.”_ – Sebastian Simon Jul 05 '20 at 18:53
  • See my edited answer @Aviale – CYr Jul 06 '20 at 03:26

1 Answers1

0

A simple explanation:

@media is the actual media query, or conditions, and applies to a broad range of elements. Now @media screen is telling the media to specifically apply the conditions to the screen.

In your case,

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

would only apply to screens that have a max-width of 1000px.

But without the word 'screen', the conditions inside the two curly brackets would not only apply to screens of a max-width of 1000px, but instead apply to most all elements, or viewports, with a max-width of 1000px:

@media (max-width: 1000px) {
    .grid {
       width:100%;      
    {
}
CYr
  • 349
  • 4
  • 17