Responsive in HTML
? Responsive in HTML
Responsive design means making your webpage look good and work well on all devices — desktops, tablets, and smartphones.
How to Make HTML Responsive
1. Use the Viewport Meta Tag
Add this inside <head> to control layout on mobile browsers:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This tells the browser to use the device’s width as the viewport width and scale the page properly.
2. Use Relative Units Instead of Fixed Pixels
Use
%,em,rem,vw,vhinstead of fixedpxto allow flexibility.
Example:
body { font-size: 1rem; /* relative to root font size */ width: 90%; /* relative width */}3. Flexible Layout with CSS
Use CSS tools like Flexbox or Grid for layouts that adapt:
.container { display: flex; flex-wrap: wrap;}.item { flex: 1 1 300px; /* grow, shrink, base width */}4. Media Queries
Apply different CSS rules based on screen size:
@media (max-width: 600px) { .container { flex-direction: column; }}5. Responsive Images
Use max-width: 100%; height: auto; in CSS to make images scale down on small screens:
img { max-width: 100%; height: auto;}Summary for Responsive HTML
Add viewport meta tag
Use flexible units and layouts
Apply media queries for different screen sizes
Make images and media flexible
Want a sample responsive webpage example?
