Home / Tutorials / Media Queries for Standard Devices
css3-media-queries

Media Queries for Standard Devices

A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

If you’re looking for a comprehensive list of media queries, this repository is a good resource.

If you’re reaction to this is: you should never base your breakpoints on devices!! You have a good point. Justin Avery has a nice post on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.

Phones and Handhelds

iPhones

Galaxy Phones

HTC Phones

Nexus Phones

 

Tablets

iPads

Galaxy Tablets

Nexus Tablets

Kindle Fire

Laptops

Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a general screen size range, then distinguishing between retina and non-retina screens.

Wearables

Yes, we’re going there. Sure, these might not exactly qualify as “standard” devices quite yet, but they are fun to look at.

Apple Watch

Moto 360 Watch

 

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

Top Useful CSS Snippets – Every Designer Should Know

With so many new trends advancing every year it can be difficult keeping up with …

css tools

CSS Tools – Extremely Useful And Powerful – 01

Here I’m sharing some extremely useful CSS tools, generators, templates and resources. We did not …

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH