learn2kode.in

Menu

CSS Tutorial

Menu

CSS Responsive Design

Responsive design ensures that your website looks good on all devices, including desktops, tablets, and mobile phones. It allows layouts, images, and text to adjust automatically according to screen size. This improves user experience and is essential for modern web design.

Fluid Layouts

 Use relative units like %, em, rem, vw, vh instead of fixed pixels. This allows elements to scale with screen size.

Copy Text 
.container {
  width: 80%;
  margin: 0 auto;
}

Flexible Images

Images should scale according to container size.

Copy Text 
img {
  max-width: 100%;
  height: auto;
}

Media Queries

Media queries apply CSS rules based on device width, height, orientation, or resolution.

Copy Text 
/* For tablets */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* For mobile phones */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 95%;
  }
}

Responsive Navigation

Use flexible menus or hamburger menus that adapt to smaller screens.

Copy Text 
nav ul {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

Mobile-First Design

Start by designing for small screens first, then use media queries for larger devices. This ensures better performance on mobile devices.

CSS Media Queries