css getting changed when applying css media querie

2020-01-27 08:23发布

站内问答 / jQuery
1930 1 4

I am applying css media queries for my website to work both in mobile as well laptop. I m using following media query for mobile 

@media only screen and (min-device-width : 321px) and (max-device-width:480px)

and following for laptop

@media only screen and (min-device-width: 1100px)

Issue is when i apply my first query for mobile,and second one for laptop,mobile UI is correct but the laptop UI is showing different results.When i remove mobile css from my list,and keeps only second query css.laptop UI is correct.

Please guide me where i m doing wrong...

1条回答
家丑人穷心不美
2楼-- · 2020-01-27 08:46

include this in <head></head> (if you have not)

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

change you @media style as this // change width as per your requirements

@media only screen (max-width: 500px) {
 // or as per your needs, as I try to explain below
}

Now I try to explain maybe..:)

@media (max-width:500px)

for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. 

@media screen and (max-width:500px)

for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.

@media only screen and (max-width:500px)

Here is a quote straight from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as "only", the style sheet should be ignored by older browsers.


I try to put some more information here, gathered from web.

@media all and (min-width: 500px) {
}

@media all and (max-width: 500px) and (min-width: 300px) {
}

@media all and (max-width: 299px) {
}



If

That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.

And

The keyword and.

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

Comma separate.

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Technically these are treated like to separate media queries, but that is effectively and or.

Not

Reverse the logic with the keyword not.

@media not all and (max-width: 600px) {
  html { background: red; }
}

Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y

Exclusive

To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.

Overriding

There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.

Mobile First

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Desktop First

Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

You can be as complex as you want with this.

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.

And for media queries priorites

sources : one two three four five

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)