Menu
What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones? Are there any standard widths for these devices?
746
If you are designing your website for smaller devices first then set your initial breakpoints with min-width, whereas, if you are designing for larger devices first then use max-width. This post discusses min-width, and max-width media features in detail along with relevant examples.
In my experience, 320px, 768px, and 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, tablets/laptops, and desktops, respectively.
Taking a look at the CSS file, you'll notice that the media query has a minimum width of 320px and a maximum width of 576px . This just means that all the styles that will go into this rule will only be applicable to devices with extra-small and small widths.
You should use (min-width first): @media screen and (min-width:400px) and (max-width:900px){ ... }
I'm looking everywhere for the best answer for this. Here what I found.
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:1281px) { /* hi-res laptops and desktops */ } I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for @ryanve. Here is the link.
72
I find these are good breakpoints to start from but always test and tweak as you go. I'd also suggest using ems instead of px for dimensions for varied device dimensions and resolutions (reasons described here (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))
So the above queries would look like this:
@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ } @media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } @media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } @media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:80.063em) { /* hi-res laptops and desktops */ } There is also a nifty pixel to em calculator online here (http://pxtoem.com/) For those of you not as familiar, including myself.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
