HTML Responsive
Responsive Web Design
Responsive design makes webpages look good on all devices.
What is Responsive Design?
It adjusts layout automatically for mobile, tablet, and desktop screens.
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Simple Responsive Layout
<div style="display:flex;flex-wrap:wrap;"> <div>Box 1</div> <div>Box 2</div> </div>
Media Query Example
@media (max-width:600px) {
body {
background: lightblue;
}
}
SEO Tip
Mobile-friendly websites rank higher on Google.