Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Responsive Web Design with Media Queries in CSS
Media Queries is a CSS technique for different style rules for different size devices such as mobiles, desktops, etc. To set the responsiveness, use the Media Queries concept. Let us see how to create responsive column cards on a web page. We will see various examples for responsive web design
The screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints.
Different screen sizes responsiveness
Let us see an example where we will set different styles for different devices and display responsiveness
The common device breakpoints are the different devices with its screen size i.e.
Phones - Screens less than 768px wide
Tablets - Screens equal to or greater than 768px wide
Small laptops - Screens equal to or greater than 992px wide
Laptops and Desktops - Screens equal to or greater than 1200px wide
Screen Size with Maximum Width 600px
When the screen size is less than 600px, the following background color is set using the background-color property −
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
Screen Size with Minimum Width 600px
When the screen size is more than 600px but less than 768px, the following background color is set using the background-color property −
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
Screen Size with Minimum Width 768px
When the screen size is more than 768px but less than 992px, the following background color is set using the background-color property −
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
Screen Size with Maximum Width 992px
When the screen size is more than 992px but less than 1200px, the following background color is set using the background-color property −
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
Screen Size with Maximum Width 1200px
When the screen size is more than 1200px, the following background color is set using the background-color property −
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
Example
To use media queries for common device breakpoints using CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
</style>
</head>
<body>
<h1>Typical Breakpoints Example</h1>
<h2>
Resize the screen to see background color change on different breakpoints
</h2>
</body>
</html>
Mixed column layout with responsiveness
Let us see another example where we will create a mixed column layout and also set responsiveness using the Media Queries concept.
Change the layout
When the screen size gets smaller than 900px, the width is set 50% −
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
When the screen size gets smaller than 600px, the width is 100% −
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
Example
To create a mixed column layout grid with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.colContainer:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Mixed col Layout Example</h1>
<h2>Resize the screen to see the below divs resize themselves</h2>
<div class="colContainer">
<div class="col" style="background-color:rgb(153, 29, 224);">
<h2>First col</h2>
</div>
<div class="col" style="background-color:rgb(12, 126, 120);">
<h2>Second col</h2>
</div>
<div class="col" style="background-color:rgb(207, 41, 91);">
<h2>Third col</h2>
</div>
<div class="col" style="background-color:rgb(204, 91, 39);">
<h2>Fourth col</h2>
</div>
</div>
</body>
</html>
Set responsive navigation menu
In this example, we will create a responsive navigation menu and also set icons for the menu. When the screen size goes down 830px, the mobile view would be visible −
@media screen and (max-width: 830px) {
.links {
display: block;
}
Example
Here is the example −
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 830px) {
.links {
display: block;
}
input[type="text"] {
display: block;
width: 100%;
margin: 0px;
border-bottom: 2px solid rgb(178, 137, 253);
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> Login
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
720 Views
