Media query css file not detecting

问题

I have designed a template and I wanted it to be responsive, so I included some media query files to achieve it. However the max-width: 500px file is not detecting properly. I really don't know how to solve it. The website works fine in all the other desktop screen resolutions. I don't know why it does not work in screen resolutions below 500px. All I did in that css file (medium-tab) was to turn the display to none for the menu-container and to activate the mobile container by writing display:block, so that the other menu will get activated automatically. How can I solve this issue?

 <link rel='stylesheet' media='screen and (max-width: 1024px)' href='css/medium-1024.css' />
        <link rel='stylesheet' media='screen and (max-width: 500px)'  href='css/medium-tab.css' />
        <link rel='stylesheet' media='screen and (min-width: 2559px)' href='css/medium-2560.css' />
        <link rel='stylesheet' media='screen and (min-width: 1367px)' href='css/medium-1400.css' />
        <link rel='stylesheet' media='screen and (max-width: 1366px)' href='css/medium-1366.css' />

回答1:

Try this method to resolve your issue. Write all the css in only one file name it as "Style.css" or whatever you want.

Add following line in head section of your html

meta name="viewport" content="width=device-width, initial-scale=1"

@media (max-width: 500px) {
 /*
  Write here the code you wrote in the style sheet of 500px.
 */
}

@media (min-width: 501px) and (max-width: 1024px) {
 /*
  Write here all the code of 1024px.
 */
}

and you can add more @media (min-width: previous-width + 1) and (max-width : next width)

always go add files or add media files in sequence. when the code is written near the end of file remember that code will be executed and the code which has been written above will be overwritten.

Some time including more than one file causes some issues.

回答2:

Did you set the viewport?

<meta name="viewport" content="width=device-width" />

回答3:

Please user these css in sequence. medium-tab.css will come at last.

回答4:

Since you have not set both min and max screen sizes but only 1 of them, Order in which you call the CSS is important

So lets break down whats happening when you call in this order :

<link rel='stylesheet' media='screen and (max-width: 1024px)' href='css/medium-1024.css' />
<link rel='stylesheet' media='screen and (max-width: 500px)'  href='css/medium-tab.css' />
<link rel='stylesheet' media='screen and (min-width: 2559px)' href='css/medium-2560.css' />
<link rel='stylesheet' media='screen and (min-width: 1367px)' href='css/medium-1400.css' />
<link rel='stylesheet' media='screen and (max-width: 1366px)' href='css/medium-1366.css' />

=> screen and (max-width: 1024px) is loaded ...yeye - this will work for resolution < 500px well

=> screen and (max-width: 500px) is loaded now, so above 500px will get over written by this...crap, never thought of this

=> screen and (min-width: 2559px) is loaded now, great, we will handle >2599px now with this CSS!!

=> screen and (min-width: 1367px) is loaded now, damn, my above CSS (for 2559px) just got over written by this CSS as it covers >2599px too.. (min-width : 2599px means that min-width is 1367px too!!)

=> screen and (max-width: 1366px) is loaded now and all hell breaks loose as this overwrites for all screen width for layout < 1367px

Solution :

=> use min and max format :

@media (min-width: 768px) and (max-width: 1024px) {
    /*
     styles here
    */

  }

in you layout media query CSS, OR

=> if you understood the explanation above, reshuffle the calling media-query CSS order!! :)

来源：https://stackoverflow.com/questions/24751469/media-query-css-file-not-detecting

标签

html

css

css3