MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS

The @media query is 1/3 of the recipe for responsive design. It is thekey ingredient that, in it's simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.

The standard media queries for different devices:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/*** iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/*** iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/*** iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/*** Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/*** Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/*** Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/*** iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*** Styles */
}

/*** iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/*** iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/*** iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/*** Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/*** Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*** Styles */
}

/*** Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Comments

Post a Comment

Popular posts from this blog

What is the difference between UI & UX design?

You'll probably get a variety of different answers due to the fact that both UI and UX design have that distinct cross-disciplinary character that makes it hard to have a single, solid definition. Here's my perspective on it though. Some random thoughts on the process itself that would hopefully help you distinguish between the two. UX Design   UX architecture intelligently provides for the user's interactive experience via features and functionality of a software-based product or service. This is achieved through a UX process which includes user persona definition, user scenarios/task flows, primary and edge use cases, architecture hierarchy of content and user decision points, etc... The UX-er is known as the primary user-advocate on a team, thereby leading the efforts around understanding the user needs/desires along with balancing those of the business stakeholders. UX documentation informs (and is informed by) content and development requirements; UX informs cre...
Read more

Pointer-Events

The   pointer-events   property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible. While the   pointer-events   property takes   eleven   possible values, all but three of them are reserved for use with SVG. The three valid values for any HTML element are: none   prevents all click, state and cursor options on the specified HTML element auto   restores the default functionality (useful for use on child elements of an element with   pointer-events: none;   specified inherit   will use the   pointer-events   value of the element's parent As demonstrated above, the prime use case for   pointer-events   is to allow click or tap behavior to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elem...
Read more

How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...
Read more