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.

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Media query in Stylesheet:

.facet_sidebar {
      Style
   }
}

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,



The output for this will be the following,



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



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.



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



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.



So output for these screens will be the following,

For full screenshot,



For less than 500px,



And for less than 350px,



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!