Responsive Website Layout – Media Query

What is “Media Queries”

Media Query is a feature of CSS3 which allows websites to adopt current screen resolution (width) and adjust itself accordingly to fit inside it.

Use of Media Queries in Responsive Web Layouts

According to a survey report published on bgr.com, the number mobile internet users have crossed that of desktop. However, even before that, looking at the trend many websites were developed in responsive way to increase traffic. Today responsive website layout falls into essential requirement list of a website development procedure.

The thing works behind the scene to accomplish this feature is nothing but Media Queries. As its name suggests Media Queries deals with media. There are several media types that it can deal with like Braille, Embossed, Handheld, Print, Projection, Screen, Speech, tty and TV. But mostly considered medias in website development are Screen and Print and at times Projection and TV.

Examples of Media Queries

Media Queries are used in CSS. A media query is typically written in the following fashion:

@media <media_name> and (min-width: Xpx) and (max-width: Ypx),

where <media_name> can be like screen, print, projection etc. and X and Y represent pixel size.

@media screen and (min-width: 320px) and (max-width: 768px)

Let us take a simple example. If we want our site background to be White for smartphones and tablets but Gray for any device with pixel width higher than tablet we can use the following query blocks:

@media screen and (min-width: 320px) and (max-width: 768px) {
 body {background-color: #ffffff;}
}
@media screen and (min-width: 769px) {
 body {background-color: #cccccc;}
}

Let’s take a bit more complex example to re-position HTML elements according to device widths:

@media screen and (min-width: 1200px) {
 .logo, .caption {float: left;}
 .logo {width: 30%;}
 .caption {69%;}
}

the above CSS snippet executes when screen size reaches a minimum value of 1200px. Once it matches the pixel size, .logo and .caption starts to float left and their width become 30% and 69% of their immediate parent element. Now to make them to appear one below the other  (.logo at the top of .caption) in smaller devices, we write this:

@media screen and (min-width: 320px) and (max-width: 768px) {
 .logo, .caption {display: block; width: 100%
}

the above media rule executes between screen widths 320px and 768px and makes both .logo and .caption elements to display as block elements allowing them to stretch across their immediate parent element.

Commonly used Media Query break points

  • Smartphone: 320px
  • Tablet: 768px
  • Netbook: 1024px
  • Desktop: 1600px

Tablet and PC Monitor Display Sizes(Data by W3C, Jan 2017)

Tablet and PC Monitor Display Sizes(Data by W3C, Jan 2017)

Smartphone Display Sizes (Data by DeviceAtlas, 2016)

  • Nokia 230, Nokia 215, Samsung Xcover 550, LG G350: 240×320
  • Alcatel pixi 3, LG Wine Smart: 320 x 480
  • Samsung Galaxy J1 (2016), Samsung Z1, Samsung Z2, Lumia 435, Alcatel Pixi 4, LG Joy, ZTE Blade G: 480 x 800
  • Huawei Y635, Nokia Lumia 635, Sony Xperia E3: 480 x 854
  • Samsung Galaxy J2, Moto E 2nd Gen, Sony Xperia E4, HTC Desire 526: 540 x 960
  • iPhone 4, iPhone 4S: 640 x 960
  • iPhone 5, iPhone 5S, iPhone 5C, iPhone SE: 640 x 1136
  • Samsung Galaxy J5, Samsung Galaxy J3, Moto G4 Play: 720 x 1280
  • Xiaomi Redmi 3, Moto G 3rd Gen, Sony Xperia M4 Aqua: 720 x 1280
  • iPhone 6, iPhone 6S, iPhone 7: 750 x 1334
  • iPhone 6S Plus, iPhone 6 Plus, iPhone 7 Plus, Huawei P9, Sony Xperia Z5: 1080 x 1920
  • Samsung Galaxy A5, Samsung Galaxy A7, Samsung Galaxy S5, Samsung Galaxy A9: 1080 x 1920
  • HTC One M9, Sony Xperia M5: 1080 x 1920
  • Samsung Galaxy Note 5, Samsung Galaxy S6, Huawei Nexus 6P, LG G5: 1440 x 2560
  • Sony Xperia Z5 Premium: 2160 x 3840