This question already has an answer here:
Please tell me how to use media queries for iPhone. I can not understand how to write media queries for two devices like 321 to 479 and also other devices.
Please tell me how I can change responsive media queries in other devices.
</div>
As simple as that , no matter which phone you are testing
@media(max-width:767px) {
Here you can define all the responsive styles for mobile view. You can
resize the screen to the smallest screen resolution i.e iphone 4 320 *
480. So according to whatever the size is required, you can just define
it once. It will be applicable to all the devices.
}
Media queries don't target specific devices (e.g. iPhone), they target screen widths (e.g. min-width: 767px and max-width: 1024px) and categories of devices and displays (print, screen).
There's a handy tutorial here:
https://www.w3schools.com/css/css3_mediaqueries.asp
@media screen and (max-width: 479px) and (min-width: 321px) {
div.page {
padding: 0.5em;
}
}
use: @media all and (max-width:200px){
}
What you put inside this will applay when the width will be less than the max-width you specify. So on a laptop for example if somone resizes the browser less then 200 px the style inside will applay , and if a phone screen has the width less than your specified max-width the style will apply automatically.