Responsive Design
Responsive design allows your web page to adapt and display properly on different devices and screen sizes. CSS media queries are commonly used to apply different styles based on the screen size. Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Responsive Design Example</h1>
<p>This page will have different background colors based on the screen size.</p>
</body>
</html>
No comments:
Post a Comment