-6

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.

Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
Muhammad Zeeshan
  • 1
  • 1

3 Answers3

0

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.
}
Anmol Sandal
  • 1,468
  • 1
  • 9
  • 16
  • you haven't explained min-width and max-width, nor corrected the OP's assumption that he is targeting devices, not screen widths. – Yvonne Aburrow Aug 23 '17 at 10:12
  • @YvonneAburrow i agree with you he is targeting a particular width, but in the next line he also asking for other devices as well, so rather then giving him a particular width solution ```@media(max-width:767px)``` is better, which covers all the small devices. – Awsme Sandy Aug 23 '17 at 11:52
0

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.

OneBeginner
  • 139
  • 2
  • 9
-1

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;
     }
}
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
  • It's not about only Iphone. There are other phones too that need to be worked on. Giving a solution for particular resolution is not a solution. – Anmol Sandal Aug 23 '17 at 11:47
  • I know that, that's why I prefaced my remarks with an explanation of the fact that we are targeting screen-widths, not devices – Yvonne Aburrow Aug 23 '17 at 12:18