07-26-2023, 07:01 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<style>
/* Apply different font sizes based on screen width */
p {
font-size: 16px;
}
@media screen and (max-width: 600px) {
p {
font-size: 12px;
}
}
</style>
</head>
<body>
<p>This is a paragraph with responsive font size.</p>
</body>
</html>
Explanation:
CSS @media rule is used for media queries, which apply different styles based on the screen size or device. In this example, the p element has a font size of 16 pixels by default, but when the screen width is 600 pixels or less, the font size changes to 12 pixels.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<style>
/* Apply different font sizes based on screen width */
p {
font-size: 16px;
}
@media screen and (max-width: 600px) {
p {
font-size: 12px;
}
}
</style>
</head>
<body>
<p>This is a paragraph with responsive font size.</p>
</body>
</html>
Explanation:
CSS @media rule is used for media queries, which apply different styles based on the screen size or device. In this example, the p element has a font size of 16 pixels by default, but when the screen width is 600 pixels or less, the font size changes to 12 pixels.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos