Responsive Website Design Using Media Queries

Media query has a media type and at least one expression that limits the style sheets' scope by using media features for individual screen size, such as width, height, and color. This is the feature of CSS 3. Let’s understand the basics of media query.

Syntax:

Media query in link element.

  1. <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />  
Media query in Stylesheet:
  1. .facet_sidebar {   
  2.       Style   
  3.    }  
  4. }  
This is the simple syntax. Now let’s do some practice by this we can get some knowledge.

If we have a simple page like the following,

simple page

The output for this will be the following,

output for this will be

When we will resize the screen, there will be no responsiveness, it will look like the following,

resize the screen

So we will get a scroll in X-Direction. A responsive design never has scroll in X. It always shows full document on X-axis in first screen. So we need to have a responsive design which can have responsiveness in all devices and screens. Let's do something for the screen size of 500 px.

Let’s edit the CSS.

CSS

The output for this window below 500px screen will be like the following, 

window

This output has no scroll. Still this output is not attractive, let’s do some more changes and make it full visible text and image bit different manner.

full Visible Text

So output for these screens will be the following,

For full screenshot,

Screen

For less than 500px,

output

And for less than 350px,

run

In similar way we can add media queries for all the screens. And can represent same website in different way with same code only changing the media query. So this is the power of Media Query. We will make some more attractive websites in next articles. Stay tuned and keep coding!