Today, we are going to see how to apply CSS Styles based on your access device resolution and size. I hope you have already heard about Responsive Web Design. let me explain what it is?.
Responsive web design is used to design websites for different access device resolution and size. Yourweb site will be accessed by desktop, tablets, smart phone devices (Android, IOS) etc. Each device will have a different screen size. If your website needs to adapt for all those device sizes and have good look and feel, you need to design your sites to be responsive using Responsive Web Design.
Following are the three important things you need to know about responsive web design
HTML5 Code:
In above HTML5 Code, we have set the body CSS background color for various screen width using CSS3 Media Queries (@media screen and max-width property).
If your access device width is not exceeding the 768px. you will see the browser background color as red. please refer the below snapshot.
If your access device width is not exceeding the 600px. you will see the browser background color as green. please refer the below snap.shot.
If your access device width is not exceeding the 460px. you will see the browser background color as orange. please refer the below snapshot.
If your access device width is not exceeding the 330px. you will see the browser background color as pink. please refer the below snapshot
If your access device width is greater than 768px, you will see the browser default white background color.
Hope, you enjoyed this post.
Responsive web design is used to design websites for different access device resolution and size. Yourweb site will be accessed by desktop, tablets, smart phone devices (Android, IOS) etc. Each device will have a different screen size. If your website needs to adapt for all those device sizes and have good look and feel, you need to design your sites to be responsive using Responsive Web Design.
Following are the three important things you need to know about responsive web design
- Fluid Layouts
- Flexible Images
- CSS3 Media Queries
HTML5 Code:
<!doctype html>
<html>
<head>
<title>Responsive Web Design Demo</title>
<meta name="viewport" content="initial-scale=1.0;width=device-width"/>
<style>
@media screen and (max-width: 768px){
body{
background-color: red;
}
}
@media screen and (max-width: 600px){
body{
background-color: green;
}
}
@media screen and (max-width: 460px){
body{
background-color: orange;
}
}
@media screen and (max-width: 330px){
body{
background-color: pink;
}
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div>
resize the browser window in order to see the background color change
</div>
</body>
</html>
In above HTML5 Code, we have set the body CSS background color for various screen width using CSS3 Media Queries (@media screen and max-width property).
If your access device width is not exceeding the 768px. you will see the browser background color as red. please refer the below snapshot.
If your access device width is not exceeding the 600px. you will see the browser background color as green. please refer the below snap.shot.
If your access device width is not exceeding the 460px. you will see the browser background color as orange. please refer the below snapshot.
If your access device width is not exceeding the 330px. you will see the browser background color as pink. please refer the below snapshot
If your access device width is greater than 768px, you will see the browser default white background color.
Hope, you enjoyed this post.
You have shared good post about Responsive Web Design.
ReplyDeleteWebsite Design Company in Bangalore
Nice...
ReplyDeleteweb design orange media
Very Informative Post. Responsive Web design is certainly the most affordable option for your business as compared to the development of a mobile app.
ReplyDeleteGreat Article, Keep it up. really helpful for beginners.
ReplyDeleteGreat Article, Keep it up. really helpful for beginners.
ReplyDelete