Responsive CSS

CSS responsiveness ensures that your web pages adapt and look good on various devices, such as desktops, tablets, and smartphones.

Media queries allow you to apply different CSS styles based on the screen size, resolution, or other properties of the device. This helps in making your design responsive.

/* Default styles for large screens */
body {
  font-size: 18px;
}

/* Styles for devices with width 768px or smaller (tablets, mobile) */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* Adjusts font size on smaller screens */
  }
}

/* Styles for devices with width 480px or smaller (mobile phones) */
@media (max-width: 480px) {
  body {
    font-size: 14px; /* Further reduces font size on very small screens */
  }
}