Responsive
Responsive
Responsive webpage means, webpage will look good on every screen sizes of device. In other words, when you open a webpage on your PC/big screen, webpage layout should look good; when you open your webpage on your tablet device, webpage layout should look good; and when you open a webpage on your mobile device webpage layout should look good.
Responsive webpages automatically adjust on all screen sizes of device.
Let’s see, how to make it possible. With media queries you can change your CSS code for different screen sizes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */
.demo {
font-size: 30px;
color: blue;
}
/* Media query for Tablet size */
@media (max-width:1024px) {
.demo {
font-size: 15px;
color:red;
}
}
/* Media query for Mobile size */
@media (max-width:768px) {
.demo {
font-size: 10px;
color: black;
}
}
</style>
</head>
<body>
<!-- demo is a class-name -->
<p class="demo">
It's my First Example
</p>
</body>
So we wrote two screen sizes of media queries 1024px and 768px, it means when your device under the 1024px screen size, your text color would be red and font size 15px; when your screen size would be under 768px your text color would be black and font size would be 10px but when you are not under these both media queries your text font size would be 30px and color would be blue.