Horje
How to create Media Queries | HTML Responsive Code
How to create Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:


Full Example of

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

Output should be:

Full Example of



Read Full::
HTML Responsive Code
Category:
HTML Code
Sub Category:
HTML Responsive Code
Uploaded:
9 months ago
Uploaded by:
Admin
Views:
3

Related Articles
What is HTML Responsive HTML Responsive Code
How to Setting The Viewport HTML Responsive Code
How to create HTML Responsive Images HTML Responsive Code
How to create HTML Responsive Images Using the max-width Property HTML Responsive Code
How to show Different Images Depending on Browser Width HTML Responsive Code
How to create HTML Responsive Text Size HTML Responsive Code
How to create Media Queries HTML Responsive Code
How to create Responsive Web Page - Full Example HTML Responsive Code
How to create HTML Responsive Web Design - Frameworks HTML Responsive Code

Single Articles
Full Example of

Share on: