Media css works only last one

I have use below css
@media screen and (max-width: 320px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1028px) {}

In index page i have used below like

link rel=‘stylesheet’ media=‘screen and (max-width: 320px)’ href=‘css/small-320px.css’ />
link rel=‘stylesheet’ media=‘screen and (max-width: 640px)’ href=‘css/normal-640px.css’ />
link rel=‘stylesheet’ media=‘screen and (max-width: 800px)’ href=‘css/large-800px.css’ />
link rel=‘stylesheet’ media=‘screen and (max-width: 1024px)’ href=‘css/extra-large-1024px.css’ />
link rel=‘stylesheet’ media=‘screen and (max-width: 1028px)’ href=‘css/extra-large-1028px.css’ />

But problem is that only last css work if it is small device or big or tablet.
Please Help me to fit mobile and tablet screen size

1 Like

You probably don’t need to split things up and make multiple requests for different css files.
Why not use just import them into a sass build or having them in one css file?

Hello mhartington,
How to applied sass?

Please help me…

I think that you have to reverse your media queries. If your resolution device is 480, it has max-width 640, 800, 1024 and 1028.

If you reverse the mediaqueries in this way:

@media screen and (max-width: 1028px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 320px) {}

a resolution of 480 will accept 1028, but 1024 will overwrite it, and 800 will overwrite it again, and finally, 640 max will overwrite it. So what you write in max-width: 640px will affect this resolution.

I don’t know if you understand me. I think I don’t explain my self right, sorry. But believe me :wink:

I have seen videos. I have understood little about sass. In style.css i have written like
.item-input-inset .item-input-wrapper input {
background: none repeat scroll 0 0 transparent;
height: 29px;
line-height: 18px;
padding-left: 2px;
But i don’t know how to use it within my project through sass for phone and tab. This css works nice for phone. i have written a lot of css in style.css . Above is only sample.
Please help me and write about steps to follow.

Note: I have set up sass in my project.

Is it only iphone and ipad? I have used in android 10 inches tabs. I have used ionic

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

//here is my style


But problem is that on first time it is working fine. When i move to
landscape it also works. But again i move to portrait my tab then it
does not work. Always landscape works. But from second time portrait
does not works all.

Please help me…