Questions about CSS Media Queries

Hello,
I have a few unanswered questions about CSS Media Queries that I hope you all can answer.
1. What are the differences between the codes listed below? Which one should be used in certain situations? Does it matter?
@media screen
@media only screen
@media all
2. I am unclear about
max-width and max-device-width
can you please explain?

Thanks :smiley:

  • Adam Czajczyk

    Hello Alex,

    I hope you're having a nice day today!

    1. What are the differences between the codes listed below? Which one should be used in certain situations? Does it matter?

    The "all", "screen" and also "print", "speech" and few other words are used to identify the type of media to be addressed. Here are some examples:

    @media screen - will address all screens (computers, tablets, phones etc) but not e.g. printers
    @media print - will be applied only to print-outs
    @media speech - is used for addressing screenreaders
    @media all - this rules will be applied to any type of device (e.g. printers, screens and screenreaders will use them)

    The word "only" (or alternatively "not") is usually used in conjunction with "and" followed by specific media feature (usually width) like this:

    @media only screen and (max-width:200px) {
    }

    The code above means that ONLY screens that are up to 200px wide will be addressed, while this

    @media screen and (max-width:200px) {
    }

    Would address ALL screens regardless of their width and all other media (e.g. printers) up to 200px wide.

    I hope that makes sense to you.

    2. I am unclear about
    max-width and max-device-width
    can you please explain?

    The first one is a maximum width of a display area usually meaning browser window while the second one is always the maximum width of the physical device display area. For example let's assume that you monitor is set to 1280px width.

    The same applies to "min-width" and "min-device-width".

    If you use "min-device-width:1280px" and then shrink you browser to be 800px wide, these rules will still be applied because resolution of physical device didn't change. If you however use "min-width:1280px" and shrink browser window to be 800px wide, these rules will no longer be applied.

    I think you may want to take a look at this page and play a bit with the "Try it yourself" tool that's available there to get some better understanding of this.

    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    I hope that helps!
    Best regards,
    Adam

  • Alex Stine

    Hello @adamczajczyk,
    You said something a little contradictory to me, can you please clear this up?

    @media screen - will address all screens (computers, tablets, phones etc) but not e.g. printers

    Would address ALL screens regardless of their width and all other media (e.g. printers) up to 200px wide.

    Can you please clear this up? You said in the first quote that it excludes printers, in the second quote you say it does effect printers. Does it only effect printers if it is specified?
    @media print
    Or screen readers?
    @media speech
    Or are you saying that this declaration
    @media screen
    overrules the width and height set by
    @media print
    or
    @media speech
    ?

    Thanks. :smiley:

  • Adam Czajczyk

    Hey Alex!

    Let's take this rule:

    @media screen and (max-width:200px) {
    }

    Please note the word "and" here. This means that screens should be addressed AND devices up to 200px. So, the "screen" and "max width" are like independent conditions here. So it's either one condition met or the other or both.

    However this rule

    @media only screen and (max-width:200px) {
    }

    includes additionally word "only" so it specifies that ONLY screens should be addressed and once this requirement is met the second must be met as well.

    Best regards,
    Adam

  • Alex Stine

    Hello,
    OK, getting closer to understanding. Let's say I want to move my logo to the right, and I use the following CSS to do it.

    @media screen and (max-width: 200px) {
    #logo {
    left: 100px;
    }
    }
    @media only screen and (max-width: 200px) {
    #logo {
    left: 100px;
    }
    }
    @media all and (max-width: 200px) {
    #logo {
    left: 100px;
    }
    }

    Which one would be better to use for just moving/styling something in the future? media all, media only screen, or media screen?

    Thanks :smiley:

  • Adam Czajczyk

    Hey Alex!

    The complex media queries make more sense if you either want to address specifically selected device/screen resolution or are building a complex "suit them all" solution that covers all option that you can think of.

    Other than that, I'd go with either 1st or 2nd one. To make it even more complicated, the first one would be more universal :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.