Skip to content
Related Articles

Related Articles

CSS3 Media query for all devices

Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 03 Nov, 2021

The media query in CSS is used to create a responsive web design to make a user-friendly website. It means that the view of web pages differs from system to system based on screen or media types. Media is allowing us to reshape and design the user view page of the website for specific devices like Tablets, Desktops, Mobile phones, etc.

Media queries can be used to check many things like the following

  • Width and height of the viewport
  • Width and height of the device
  • Orientation
  • Resolution

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device where the document is displayed on. If the media query is true then the style is applied. In simple words, it uses the @media rule to add the block of CSS properties, based on certain conditions.

Syntax:

@media not | only mediatype and (expression)
{
    // Code content
}

We can add the breakpoint to see the screen-width along with the width and height of the viewport for the different devices. A breakpoint is a point or key that determines when to change the layout by reshaping & adding the new rules inside the media queries. There are some common breakpoints, not a standard resolution, that can be used for the different widths & heights of devices:

  • For Mobile devices: 320px-480px
  • For Tablets or iPad: 480px - 768px
  • For Laptop or small-size screen: 768px -1024px
  • For Desktop or large-size screen: 1024px -1200px
  • For Extra-large size device: 1200px and more

These breakpoints can help to build responsive designs(ie., Mobile-first design) by specifying the different sets of values for width & height. We can also use the media queries for changing the layout of a webpage that will be depending on the orientation of the browser.

Example: This example illustrates the use of the CSS Media query to build the mobile-first design by specifying the different device-width.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GeeksforGeeks CSS Media Query</title>
    <meta name="description"
          content="CSS Media Query for all devices
                       like mobile, tablet, desktop etc.">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1">
    <link rel="stylesheet" href="gfg-style.css">
</head>
 
<body>
    <div class="gfg-div">GeeksforGeeks</div>
</body>
 
</html>

CSS Code: The following CSS code specifies the media queries with different styling properties based on certain conditions that will be displayed according to the device size.

CSS




* {
  margin: 0;
  padding: 0;
}
 
/* Default Design */
.gfg-div {
 
  /* To make all elements center */
  display: flex;
  justify-content: center;
  align-items: center;
 
  /* Default Styling */
  margin: 20px auto;
  padding: 30px;
  font-size: 30px;
  width: 300px;
  height: 300px;
  background-color: darkseagreen;
  color: black;
}
 
/* For Desktop View */
@media screen and (min-width: 1024px) {
  .gfg-div {
    background-color: #63c971;
    color: #fff;
  }
}
 
/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: orange;
    color: black;
  }
}
 
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
  .gfg-div {
    width: 200px;
    height: 200px;
    background-color: red;
    color: #fff;
  }
}
 
/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: cyan;
    color: black;
  }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: chartreuse;
    color: black;
  }
}
 
/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: brown;
    color: black;
  }
}
 
/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: cornflowerblue;
    color: black;
  }
}
 
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: darkgoldenrod;
    color: black;
  }
}

Output:

Supported Browsers:

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Internet Explorer
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!