how can i make media query work with min-with?-CodePudding

@charset "UTF-8";
/* inport the basis style page */
@import url("body.css");
/* why is this not working???? */
/* import alternative style 500px*/
@media (min-width: 500px){
@import url("screen_layout_small.css");
}

the file : screen_layout_small.css `

@charset "UTF-8";

body {
    background-color: red;
}

the url("screen_layout_small.css") dos work when it is not in a @media (works when it is not in a responsive comand ??)

load the the css file screen_layout_small.css when the size is minimal 500 or larger then load screen_layout_small.css

by the way it dos not mather if i use min-with or max-with. the file dos not load in the @media!!!

CodePudding user response：

I think you are using a wrong syntax. It should be:

@import url|string list-of-mediaqueries;

So in your case it should be:

@import "screen_layout_small.css" screen and (min-width: 500px);

CodePudding user response：

I think the mistake is in the syntax. Try the code that I mentioned below

@charset "UTF-8";
/* inport the basis style page */
@import url("body.css");
/* why is this not working???? */
/* import alternative style 500px*/
@media screen and (min-width: 500px){
@import url("screen_layout_small.css");
}