-4

I am new at coding and I am having challenges with CSS Media queries. I have noticed that there are tons of mobile screen sizes out there, and is there a way I can target them in groups without having to code for every screen size per company model - i.e: iPhone, Samsung etc. Also even if I target one mobile design, say iPhone, do I have to code for every screen size, iPhone 4, 5, 6? At Teamtreehouse they stress that media queries must not be mobile screen specific, but I don’t get this. I hope my questions is clear.

Chris
  • 11
  • 5
  • How are you currently coding the sizes of your site's div's? – user3216887 Nov 16 '15 at 05:45
  • This isn't something for stack, try quora. – James111 Nov 16 '15 at 05:45
  • @user3216887, I think my challenge is not on div sizes, but on breakpoints. I have tried to read and read solutions online, but I seem to be hiding a wall. My challenge specifically is how to set responsive design without having to code for every screen size, like is there an average where one can size for all sizes of screens in media query. @ James111, why should I try Quora? I have a Quora account but I thought I would get a more specific answer here after assessing the two. – Chris Nov 16 '15 at 07:26

1 Answers1

0

CSS Media queries allow you to target CSS rules based on screen size, device-orientation or device resolution etc. Generally developers use 4 generic breakpoints (tiny, narrow, medium, and wide) of CSS Media queries to target devices based on resolution. Below are the common Media queries:

@media only screen and (min-width:1280px) {}
@media (min-width:1024px) and (max-width:1279px) {}
@media (min-width:768px) and (max-width:1023px) {}
@media (min-width:480px) and (max-width:767px) {}

Note- While following above CSS Media Queries mobile first approach should be used.

Apart from above below can be used to target specific device, resolution or orientation:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Chanderkant Jangra
  • 1
  • 1