Responsive HTML Basics
Responsive design allows your website to look good on various devices like mobile, tablet, or desktop. This requires using flexible sizes and layouts.
Viewport Meta Tag
The viewport meta tag is fundamental to responsive design. Without it, browsers may use a fixed-width layout, which can distort your page on mobile devices.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Percentage-Based Widths
Instead of fixed pixels, use percentage values for widths. This way, elements adapt to the parent container and screen size.
html
<div style="width: 80%;">This box is 80% of its parent</div>Flexible Images
To ensure images don't overflow their container, set max-width to 100% and height to auto. This way, the image scales automatically to fit the space.
html
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Creating a Responsive Layout
Use CSS Flexbox or Grid to create multiple columns that rearrange or wrap on smaller screens. Flex-wrap helps prevent elements from overflowing.
html
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 300px;">Left</div>
<div style="flex: 1 1 300px;">Right</div>
</div>Simple Fully Responsive Page
This example shows a basic HTML page that adapts to different screen sizes. Images and containers resize automatically.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
max-width: 800px;
margin: auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Layout</h1>
<p>This layout adapts to screen size.</p>
<img src="https://via.placeholder.com/600x300" alt="Example">
</div>
</body>
</html>Common Mistakes
Avoid using fixed sizes (e.g., width="600") because they don't adapt to different screens. Instead, use flexible settings like max-width and height: auto.
html
<!-- Bad: fixed size -->
<img src="image.jpg" width="600" height="300">
<!-- Good: responsive -->
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Using Media Queries
Media queries let you define different styles for specific screen sizes. This is especially useful when designing distinct layouts for mobile and desktop.
html
<style>
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
</style>Practical Tips
Avoid fixed widths, always include the viewport meta tag, and test your site on various screen sizes. You can use browser developer tools for this.
Select Language
Set theme
© 2025 ReadyTools. All rights reserved.