Responsive Website Design Using Media Queries

Introduction 

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

Media query in the 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 a 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 a scroll in X. It always shows a full documents on X-axis in the 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 fully visible text and image a bit different manner.
 
full Visible Text
 
So the output for these screens will be the following,
 
For full screenshot,
 
Screen
 
For less than 500px,
 
output
 
And for less than 350px,
 
run
 

Summary 

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