CSS: Standard Device @media Queries

style.css

/* iPhone – 320 x 480Samsung, HTC, LG – 320 x 480 This is the default styling before any media queries are made. It covers all general styles and the portrait size of many phones, at this width it’s important to consider the screen real estate lost to navigation on older iPhones (about 124px) – this makes the height about 356px, which is really not very much room. Make sure to squeeze that content down at the top of every page displayed on mobile.At this viewport width, you should have no more than 3 navigation items in the primary navigation. You will want to remove any presentational and unnecessary images at this size as they are a costly overhead on slow connections and aren’t going to look that great on such a small screen.  */
@media only screen and (max-device-width: 320px) {

}

/* iPhone – 320 x 480HTC, LG, Samsung, Motorola – 320 x 480HTC, LG, Samsung, Motorola, Nokia Lumia */
@media only screen and (min-device-width: 320px) {

}


/* The iPhone landscape width and a popular resolution for Android and Windows phones. On the old iPhone, the landscape mode leaves you with a measly 208px height to work with. Make sure you take this into consideration and keep key relevant content and primary navigation at the top of the page. */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {

}

/* HTC – 540 x 960HTC, Motorola, Samsung – 720 x 1280   Some adjustments may be needed at widths over 480px. We can start displaying more content and can add more items to the primary navigation. Button sizes will probably need to be increased.*/
@media only screen and (min-device-width: 480px) {

}

/* Tablet browsersHTC, LG, Samsung, Motorola, Nokia – 480 x 800iPad, iPad mini – 768 x 1024Samsung Galaxy Note – 800 x 1280 800px is a popular screen width and height for Android and Windows phones and they will display the tablet version. This should be all right in most cases, but it is important to test and make sure the page isn’t too top-heavy and that buttons are still big and clickable.Another challenge at this width is the emergence of devices like the iPad mini and Samsung Galaxy Note, you’ll have styles for the larger tablet version displaying on a smaller screen. You may want to check for these devices manually if you don’t want the tablet version to be squeezed down on the smaller screen.  */
@media only screen and (min-device-width: 768px) {

}

/* Desktop computersHigh resolution devicesiPad, iPad mini – 768 x 1024Samsung Galaxy Note – 800 x 1280 At this level we will want to include any desktop-specific styles and styles specific to high-resolution devices (which we will cover in our next blog post). For tablets, it’s a reasonable assumption that displaying the desktop version of the site on tablet is an acceptable solution. Just make sure that when the user turns their tablet around to landscape mode they don’t get a nasty shock when a different group of styles are rendered!Many modern devices now have a portrait or landscape width of 960px or more which presents a new challenge. We can include checks for pixel-ratio and resolution if we still want to make presentational changes different to the desktop version.IMPORTANT: If you’re supporting older versions of IE, you’ll need to duplicate the desktop-specific styles as IE < 9 will ignore the media query. */
@media only screen and (min-device-width: 960px) {

}