When designing a mobile version of the site, the core question is still what resolution to choose and which are the most popular ones. Answering this question will help you to build the so-called «mobile responsive design».

By reference to statistics we will consider five the most popular mobile screen resolutions.

Mobile Responsive Design: Most Popular Resolutions

And five the most popular tablet resolutions.

Mobile Responsive Design: Most Popular Tablet Resolutions

How to Create Mobile Responsive Design?

The media queries are entering the game. For instance, if we add the following code to the stylesheet, it will define the site background, provided that a certain device will have 480 or less pixels screen.

@media screen and (max-device-width: 480px) and (orientation: portrait) {
  #background  {
    width: 480px;
    background:url(/img/background.jpg);
  }
}

We can also use CSS-rule @import for the conditional loading of stylesheets into the current stylesheet. For example, the following code imports the phone.css, provided that a certain device will have the screen and the display area of maximum width 480 pixels.

@import url("phone.css") screen and (max-width:480px);

When creating responsive web-designs the most commonly used media queries are about display area width and device screen width (device-width).

All the features mentioned above can be provided with the prefix min or max to define the range. Look at the following piece of code:

@import url("phone.css") screen and (min-width:560px) and (max-width:1136px);

Minimum (min) and maximum (max) were defined in the media queries to define resolution. File phone.css will be imported only when it’s referred to devices with the minimum display area width of 560 pixels and maximum display area width of 1136 pixels.

And finally the most convenient media queries for Apple products.

iPhone < 5:

@media screen and (device-aspect-ratio: 2/3) { your styles }

iPhone 5:

@media screen and (device-aspect-ratio: 40/71) { your styles }

iPad:

@media screen and (device-aspect-ratio: 3/4) { your styles }

Subscribe to Kukuruku Hub

Or subscribe with RSS

0 comments

Read Next

Hi Everyone! We are about to launch a new project very soon - CrowdMind.co. Sign up to get a private beta access!