Skip to content
Related Articles

Related Articles

CSS3 Media query for all devices
  • Last Updated : 07 Apr, 2021

Media query 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.

Syntax:

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

HTML Code:



index.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, destop 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 is the code for the file “gfg-style.css” used in the above HTML code.

gfg-style.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: 

MOBILE PORTRAIT VIEW

MOBILE LANDSCAPE VIEW

TABLET DEVICE VIEW

DESKTOP VIEW

My Personal Notes arrow_drop_up
Recommended Articles
Page :