learn2kode.in

Menu

CSS Tutorial

Menu

CSS Media Queries

Media queries are a key feature of responsive design. They allow you to apply different CSS styles depending on the device’s screen size, orientation, resolution, or other features. This ensures your website looks great on desktops, tablets, and mobile phones.

Syntax

Copy Text 
@media media-type and (condition) {
  /* CSS rules go here */
}
  • media-type: screen, print, all (optional, default is all)
  • condition: Features like max-width, min-width, orientation, resolution

Example 1: Basic Mobile Styles

Copy Text 
/* Default styles for desktop */
body {
  font-size: 18px;
  background-color: lightgray;
}

/* Styles for screens 600px wide or smaller */
@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
    background-color: lightblue;
  }
}

Example 2: Tablets

Copy Text 
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .container {
    width: 90%;
    padding: 15px;
  }
}

Example 3: Orientation

Copy Text 
/* Landscape mode */
@media screen and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

/* Portrait mode */
@media screen and (orientation: portrait) {
  body {
    background-color: lightpink;
  }
}

Key Points:

  • Combine multiple conditions using and, or, not
  • Mobile-first approach: Write default styles for mobile, then use min-width for larger devices
  • Media queries can target not only width but also height, resolution, orientation, and more
CSS Icons