CloseTag | الشروحات | CSS | أمثلة علي Media Query في لغة CSS | CSS Media Query Examples

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul
{
  padding:0;
  margin:0;
  list-style:none;
  float:left;
}

li
{
  float:left;
}

a
{
  float:left;
  padding:10px 15px;
  text-decoration:none;
  background:black;
  color:white;
}

a:hover
{
  background:#0069d9;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) 
{
  ul
  {
  width:100%;
  }
  
  li
  {
  float: none;
  width:100%;
  }
  
  a
  {
  width:100%;
  }
}
</style>
</head>
<body>

<h1>Responsive navigation menu with media query</h1>
<p>Resize the browser window to see the effect: When the screen is less than 500px, the navigation menu will be displayed vertically instead of horizontally.</p>

<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Products</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

</body>
</html>