Responsive
web design techniques with media queries:
You want to
learn responsive web designing so must need to use meta tag in the html on
<head> section:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you will
not use meta tag as above then you
will found your css is working but not change for the mobile devices means
small devices. And then need to media queries as syntax below:
@media() {
.anyclass { }
}
@media(width==min-width, max-width, width) {
.anyclass {
background: #eb7979;
padding: 15px;
}
}
You can use
any class between @media body tag as curly braces. This is same as javascript condition like :
if (condition) {
// block code
}
Now you can start
html and convert in the responsive html code only from css.
You can see
below code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive HTML from CSS with media query</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mainBox {
background: #ddd;
border: 1px solid #ccc;
padding: 15px;
max-width: 600px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 0 10px 1px #999;
}
@media(width:1100px) {
/*
this is optional as your requirement that you need only on
the screen 1100
} */
}
@media(min-width:1200px) and (max-width: 1300px) {
/*
this is optional as your requirement that you need only
on the minimum device size 1200 to 1300
} */
.mainBox {
background: #f00;
padding: 15px;
}
}
@media(max-width:1024px) {
.mainBox {
background: #0bf;
padding: 15px;
}
}
@media(max-width:992px) {
.mainBox {
background: #0b6;
padding: 15px;
}
}
@media(max-width:767px) {
.mainBox {
background: #ccc;
padding: 15px;
}
}
@media(max-width:414px) {
.mainBox {
background: #eb7979;
padding: 15px;
}
}
</style>
</head>
<body>
<div class="mainBox">Responsive webdesining from CSS with media query</div>
</body>
</html>
How to test
this page responsive or not?
Now you can
go on the browser and resize your window and when change your device size then
you will found that your media query is working. As below screenshot:
No comments:
Note: Only a member of this blog may post a comment.