Brtest Tutorial
HTML Responsive Design
Responsive Web Design makes your web pages look good on all devices — desktops, tablets, and phones. It uses flexible layouts, responsive images, and CSS media queries.
Why Responsive Design Matters
Users visit websites from many different screen sizes. If your site only looks good on a desktop, mobile users may have a poor experience. Responsive design ensures your layout automatically adjusts to any screen width.
Tip: A responsive website is easier to use, loads faster, and is favored by search engines.
The Viewport Meta Tag
The <meta> viewport tag tells the browser how to control the page's dimensions and scaling.
Example
Adding the viewport tag in the <head> section:
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
This makes the page match the screen width of the device and scale properly on phones and tablets.
Responsive Layouts
Instead of fixed pixel values, use relative units like percentages (%) to make layouts flexible.
Example
Two responsive columns using percentages:
<div style='width:50%; float:left; background-color:lightblue;'>Column 1</div>
<div style='width:50%; float:left; background-color:lightgreen;'>Column 2</div>
Try it Yourself »
When the screen gets smaller, each column shrinks automatically.
Responsive Images
Images can be made responsive by setting their width to 100% and letting the height adjust automatically.
Example
Responsive image:
<img src='pic_trulli.jpg' style='width:100%; height:auto;'>
Try it Yourself »
This makes the image scale up or down depending on the screen size.
Using CSS Media Queries
Media queries let you apply different CSS styles depending on the screen width or device type.
Example
Basic media query:
body { background-color: lightblue; }
@media only screen and (max-width: 600px) {
body { background-color: lightgreen; }
}
Try it Yourself »
In this example, the background color changes when the screen is smaller than 600px.
Responsive Text
You can make text scale with the screen size by using the CSS vw (viewport width) unit.
Example
Responsive text size:
h1 { font-size: 5vw; }
Here, 5vw means 5% of the viewport width.
So the text grows or shrinks depending on the screen size.
Responsive Containers
You can use a centered container that adapts to the screen using CSS max-width.
Example
Centered responsive layout:
<div style='max-width:800px; margin:auto; background:white; padding:20px;'>
<h2>Responsive Container</h2>
<p>This container adjusts its width depending on the screen size.</p>
</div>
Try it Yourself »
Example: Simple Responsive Page
Example
Complete responsive layout:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
* { box-sizing: border-box; }
.column { float: left; width: 50%; padding: 10px; }
.row::after { content: ''; display: table; clear: both; }
@media screen and (max-width: 600px) {
.column { width: 100%; }
}
</style>
</head>
<body>
<h2>Responsive Layout Example</h2>
<div class='row'>
<div class='column' style='background-color:lightblue;'>Column 1</div>
<div class='column' style='background-color:lightgreen;'>Column 2</div>
</div>
</body>
</html>
Try it Yourself »
Best Practices
- Always include the viewport meta tag.
- Use relative units like %, em, and vw instead of fixed px values.
- Use CSS media queries to adapt layouts for different screen widths.
- Test your design on multiple devices or browser tools.
Summary
<meta name='viewport'>- makes pages mobile-friendly.- Use percentages for flexible layouts.
- Make images responsive with
width:100%. - Use media queries for adaptive designs.
Next, you'll move on to CSS Basics — where you’ll learn how to style and beautify your web pages.
