Loading Please Wait...
Responsive web design refers to the design of web pages or websites that automatically adjust their page content according to different devices (screen size and viewport) such as mobiles, tablets, laptops, desktop PCs, TVs, etc.
Responsive web design can be achieved by combination of HTML and CSS, where we resize, show/hide, shrink content of website to looks good in like desktops, tablets, phones, etc.
Visual area is different for different devices. It is smaller in mobile device and larger desktop PC.
Viewport setting helps the browser to control the page dimension and scaling to look page good on all devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Below images demonstrate the webpage with and without viewport. Looks how the content (image, text) is affected such as layout, size, etc.
Without Viewport
With Viewport
Main things to consider in responsive design is to use responsive CSS units (relative units) to size your content like images, text, sections, etc. Some of responsive units are listed below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-size: 18px;
}
div{
font-size: 2rem;
}
section{
font-size: 3rem;
}
</style>
</head>
<body>
<p>Font size set to 18px which is inherit from parent that is body which is 18px.</p>
<div>Font size set to 2rem which is 2 times the font of browser and not inherit from parent that is body which is 18px.</div>
<section>Font size set to 3rem which is 3 times the font of browser and not inherit from parent that is body which is 18px.</section>
</body>
</html>
Images are one of the important part of the website to make it attractive. Large images may make the layout looks bad in small screens.
To make images responsive use the width CSS property and set it to 100%.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="https://lynxsia.com/images/navigation/website.webp">
<br">
<img src="https://lynxsia.com/images/navigation/website.webp" style="width: 100%;">
</body>
</html>
We can also display different images according to the device from a set of images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="https://lynxsia.com/images/navigation/sms.webp" media="(max-width:400px)">
<source srcset="https://lynxsia.com/images/navigation/graphic.webp" media="(max-width: 720px)">
<source srcset="https://lynxsia.com/images/navigation/erp.webp" media="(max-width: 1024px)">
<source srcset="https://lynxsia.com/images/navigation/website.webp">
<img src="https://lynxsia.com/images/navigation/erp.webp" alt="API">
</picture>
</body>
</html>
Media queries help us to write CSS style specific to the device width.
Resize browser to see how below div changes accordingly. In mobile 1 div (vertically), in tablets 2 div, in laptop, 4 div (Horizontally).
@media screen and (max-width: 800px) {
div {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
div{
padding: 10px;
color: #ecf1f9;
width: 100%; /* Initially set to 100% on all viewport */
float: left;
}
div:nth-child(1){
background-color: #ff5071;
}
div:nth-child(2){
background-color: #fc8d2a;
}
div:nth-child(3){
background-color: #04f5c6;
}
div:nth-child(4){
background-color: #9b87bc;
}
@media screen and (min-width: 576px) {
div {
width: 50%; /* The width is 50%, when the viewport is 576px or larger*/
}
}
@media screen and (min-width: 768px) {
div {
width: 25%; /* The width is25%, when the viewport is 768px or larger*/
}
}
</style>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</body>
</html>
You can use CSS Frameworks to design responsive web pages and websites. Some of the popular frameworks are:
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved