BMR EDUCATION Courses Coding Reference BMR Online Tools About Contact Login
Quick Recap Examples Quiz Compiler

HTML Responsive Web

The ability of a web page or application to adapt and display properly on different devices and screen sizes, such as desktop computers, laptops, tablets, and smartphones.
In short words Looking a web page good in all devices.
To make an HTML page responsive, you typically use CSS (Cascading Style Sheets) media queries and fluid layout techniques.
Let get some of the main method used in a webpage to make it responsive.

Meta viewport tag

Add the following meta viewport tag in the <head> section of your HTML document. This tag sets the viewport to the device's width and scales the page accordingly.

Example

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Run

Fluid layout

Use relative units like percentages and ems instead of fixed pixel values for widths, heights, and margins. This allows elements to adjust based on the screen size.

Example

<div style="width: 100%;"></div>
<div style="width: 5em;"></div>
Run

CSS media queries

Media queries allow you to apply specific CSS styles based on the device's characteristics (e.g., screen width). They are enclosed in @media blocks and can be used to adjust the layout and appearance for different screen sizes.

Example

/* For screens smaller than 768px */
@media (max-width: 767px) {
  /* CSS rules for small screens */
  .p1{font-size:10px;}
}

/* For screens between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* CSS rules for medium-sized screens */
  .p1{font-size:15px;}
}

/* For screens larger than 1023px */
@media (min-width: 1024px) {
  /* CSS rules for large screens */
  .p1{font-size:20px;}
}
Run

Responsive Images

To make images responsive to device width keep the width and height in percentage values instead of fixed values in px.

Example

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

  </style>
</head>
<body>
  <div class="container">
    <img src="example.jpg" alt="Example Image">
  </div>
</body>
</html>
Run

Quick Recap

Topics Covered

Responsive web pages
Media Queries
Responsive Images

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK

Rating


Message