HTML Responsive Design
Responsive design ensures your website looks good on all devices: desktop, tablet, and mobile.
1. Meta Viewport
Add this in the <head> to tell the browser to fit the screen width:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Flexible Layout Example
Here are 3 boxes. They adjust automatically on different devices:
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
Mobile View (≤600px)
Box 1
Box 2
Box 3
Tablet View (601px–900px)
Box 1
Box 2
Box 3
Desktop View (≥901px)
Box 1
Box 2
Box 3
3. Flexible Images
Images also adjust automatically on all devices:
<img src="images/fresh-fruits.png" alt="Sample" style="max-width:100%; height:auto;">
4. Media Queries
Media queries allow you to change styles based on device width.
Next Lesson → HTML Computer Code Elements
Previous Lesson → HTML <iframe> Element