Media queries is a simple yet incredibly powerful tool to activate some CSS properties, depending on certain browser and device characteristics, such as the browser's viewport size, the device's width and height, and orientation. Before diving into the details, let's write a small script to experiment with this feature:
<!doctype html>
<html>
<head>
<title>media queries</title>
<style>
ul{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
border: 2px solid black;
margin: 5px;
padding: 0px 10px;
display: inline-block;
}
@media screen and (max-width: 400px){
li{
line-height: 20px;
text-align: center;
display: block;
}
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five...