CSS Media Queries for Desktop, Tablet, Mobile

---

CSS Media Queries allow you to create responsive websites across all screen sizes, ranging from desktop to mobile.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

1. width and height of the viewport
2. width and height of the device
3. orientation (is the tablet/phone in landscape or portrait mode?)
4. Resolution

 

Syntax :
@media not|only mediatype and
(mediafeature and|or|not mediafeature) {
  CSS-Code;
}

OR

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    // Your code here
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    // Your code here
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    // Your code here
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    // Your code here
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    // Your code here
}

Orientation: Portrait / Landscape
Media queries can also be used to change layout of a page depending on the orientation of the browser.

@media only screen and (orientation: landscape) {
  body {    background-color: lightblue;  }
}

@media screen, (min-width : 480px) and (max-width : 768px) {
  .container{
     // Your code here
  }
}

We will have four screen breakpoints:
Mobile  -> 576px
Tablet  -> 768px
Laptop  -> 992px
Desktop -> 1200px

@media screen and (max-width: $desktop){
  .container{
    background-color: $color-4;
  }
}

CSS Media Queries allow you to create responsive websites across all screen sizes, ranging from desktop to mobile.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
Resolution

 

 

Post Comments

---