By | June 7, 2017

Responsive web design is an approach to web design allowing users developed desktop web pages to be viewed in response to the size of the screen or web browser one is viewing with it.

Getting an idea of responsive design

Desktop view:

Responsive web design

Tablet view:

Responsive web design

Mobile view:

Responsive web design

Responsive web design – using media queries

A media query consist of zero or more expressions that limit the scope of style sheets using media features like width, height and color. Media queries were introduced in CSS3.


Media queries consist of optional media type and can have zero or more expressions. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Logical operators

  • and
    This keyword is used for combining multiple media features together.
  • comma-separated lists
    comma-separated lists is similar to logical operator or. When using it, if any query returns true ,the corresponding styles are applied.
  • not
    This keyword returns true if the media query would otherwise have returned false.

Media features


Value Usage
color integer Indicates no. of bits per color component of output device.
aspect-ratio ratio Describe the aspect ratio of the targeted display area of the output device

grid boolean Determines whether the output device is grid device or bitmap device
height length Describes the height of the output device rendering surface
monochrome integer Indicates no. of bits per pixel on monochrome device
orientation landscape / portrait Indicates whether the orientation of the device is portrait or landscape
resolution resolution Indicates the resolution of the output device
scan progressive / interlace Indicates scanning process of television output devices
width length Describe the width of the rendering device

Responsive web design – using bootstrap

Bootstrap includes a responsive, mobile-friendly grid system that scales up to 12 columns according to the view port size. It provides predefined classes for easy layout options.

The Bootstrap grid system has four classes:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Bootstrap provides some helper classes, for mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

Responsive web design
Article Name
Responsive web design
Responsive web design is an approach to web design allowing users developed desktop web pages to be viewed in response to the size of the screen on which it is viewed.
Publisher Name
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *