What does media screen and max-width 1024px mean in CSS

Question

I found this piece of code in a CSS file I inherited  but I can t make any sense out of it    media screen and  max-width  1024px       img bg           left  50           margin-left  -512px        Specifically  what is happening on the first line

User · Answer

In my case I wanted to center my logo on a website when the browser has 800px or less, then I did this by using the @media tag:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

It worked for me, hope somebody find this solution useful. :) For more information see this.

User · Answer

If your media query condition is true then your CSS with that condition will work  That means CSS within your media query s condition pixel size will effect   or else if the condition will fail that mean if the device s width is greater than 1024px than your CSS will not work Because your media query condition false   max-width is your max CSS limit till that width

User · Answer

It s limiting the styles defined there to the screen  e g  not print or some other media  and is further limiting the scope to viewports which are 1024px or less in width   http   www css3 info preview media-queries

User · Answer

It says  When the page render on the screen at a resolution of max 1024 pixels in width then apply the rule that follow   As you may already know in fact you can target some CSS to a media type that can be one of handheld  screen  printer and so on    Have a look here for details

User · Answer

It means if the screen size is 1024 then only apply below CSS rules

User · Answer

That   s a media query  It prevents the CSS inside it from being run unless the browser passes the tests it contains   The tests in this media query are     media screen     The browser identifies itself as being in the    screen    category  This roughly means the browser considers itself desktop-class     as opposed to e g  an older mobile phone browser  note that the iPhone  and other smartphone browsers  do identify themselves as being in the screen category   or a screenreader     and that it   s displaying the page on-screen  rather than printing it  max-width  1024px     the width of the browser window  including the scroll bar  is 1024 pixels or less   CSS pixels  not device pixels     That second test suggests this is intended to limit the CSS to the iPad  iPhone  and similar devices  because some older browsers don   t support max-width in media queries  and a lot of desktop browsers are run wider than 1024 pixels    However  it will also apply to desktop browser windows less than 1024 pixels wide  in browsers that support the max-width media query   Here   s the Media Queries spec  it   s pretty readable    http   www w3 org TR css3-mediaqueries

User · Answer

Also worth noting you can use  em  as well as  px  - blogs and text based sites do it because then the browser makes layout decisions more relative to the text content   On Wordpress twentysixteen I wanted my tagline to display on mobiles as well as desktops  so I put this in my child theme style css   media screen and  max-width 59em       p site-description           display     block

User · Answer

It targets some specified feature to execute some other codes     For example    media all and  max-width  600px       navigation       -webkit-flex-flow  column wrap      flex-flow  column wrap      padding  0         the above snippet say if the device that run this program have screen with 600px or less than 600px width  in this case our program must execute this part

User · Answer

That s Media Queries  It allows you to apply part of CSS rules only to the specific devices on specific configuration

[css] What does @media screen and (max-width: 1024px) mean in CSS?

Examples related to css

Examples related to media-queries