+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Responsive web design techniques in CSS3 (/showthread.php?tid=5167)
Responsive web design techniques in CSS3 - Qomplainerz - 07-26-2023
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.