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
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?
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
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;
width:100%
}
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.
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.
