CSS3 Media Query

Next ❯CSS Grid

Used to define different style rules for different media devices

  • Mainly used for Responsive Web Designing
To make it work in your mobile or tablet devices you must declare a Viewport <meta> tag inside <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • turned_in_notMedia Query property
    • @media
    • @import

@media

Media rules are been declared inside it, later on this media will execute automatically only when the media query statement is true

@media not|only mediatype and (media feature)

Media Query statement


If not or only operators are not used in media query, then by default all will be used

  • turned_in_not@media syntax
    @media not|only mediatype and (media feature) {
    /*CSS-Code;*/
}

    OR, You can also have different external CSS for different media

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="extrnalstyle.css">

TypesDescription
allUsed for all media type devices
printUsed for printers
screenUsed for computer screens, tablets, smart-phones etc.
speechUsed for screen readers that "reads" the page out loud
FeaturesMin/MaxDescription
aspect-ratiodoneSpecifies the ratio of width and height of the viewport
colordoneSpecifies the number of bits per color component for the output device
color-indexdoneSpecifies the number of colors the device can show
gridXWhether the device is a grid or bitmap
widthdoneSpecifies the viewport width
heightdoneSpecifies the viewport height
monochromedoneSpecifies the number of bits per pixel on a monochrome (greyscale) device
orientationdoneSpecifies the orientation of the viewport (landscape or portrait)
resolutiondoneSpecifies the resolution of the output device, using dpi or dpcm
hoverXDoes the primary input mechanism allow the user to hover over elements?
any-hoverXDoes any available input mechanism allow the user to hover over elements?
inverted-colorsXIs the browser or underlying OS inverting colors?
light-levelXLight level of the environment
pointerXIs the primary input mechanism a pointing device, and if so, how accurate is it?
any-pointerXIs any available input mechanism a pointing device, and if so, how accurate is it?
scanXSpecifies the scanning process of the output device
scriptingXIs scripting (e.g. JavaScript) available?
updateXHow quickly can the output device modify the appearance of the content
overflow-blockXHow does the output device handle content that overflows the viewport along the block axis
overflow-inlineXCan content that overflows the viewport along the inline axis be scrolled

Resize your browser
to see change
box3
@media screen and (min-width: 480px) {
  #box3 {
    background-color: lightgreen;
    color:black;
    }
}
@media screen and (min-width: 768px) {
  #box3 {
    background-color: teal;
    color:white;
  }
}
@mediasubject
@mediaclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box3 {
  background-color: #e95f73;
  width:80%;
  height:100px;
  text-align:center;
  padding:10px;
  margin:auto;
}
@media screen and (min-width: 480px) {
  #box3 {
    background-color: lightgreen;
    color:black;
    }
}

@media screen and (min-width: 768px) {
  #box3 {
    background-color: teal;
    color:white;
  }
}
</style>
</head>
<body>
<div id="box3">Resize your browser<br>to see change<br>box3</div>
</body>
</html>
  • turned_in_notConditional Media features
    • label_outlineUsing "and" operator
      @media screen and (max-width: 768px) and (min-width: 320px){
  body{
      background-color: lightgreen;
    }
}

      Above Media Query statement specifies that the body background-color becomes lightgreen when browser width is in between 768px & 320px

    • label_outlineUsing "," [act as "or" operator] 
      @media screen and (min-width: 1024px) , (max-width: 468px){
  body{
      background-color: lightgreen;
    }
}

      Above Media Query statement specifies that the body background-color becomes lightgreen when browser width is either at max 468px or minimum 1024px

      Here, Any media feature statement becomes true then CSS code inside it will execute


@import

Used to import external style sheet into another style sheet either from same or different domain

Syntax

@import url|string;

/*Example*/
@import url('myCssFilePath.css');
@import "myCssFilePath.css";

Syntax - For media type 

@import url|string mediatype and (media feature);

/*Example*/
@import url('myCssFilePath.css') screen and (min-width:1024px);
@import "myCssFilePath.css" print;
  • Note! If using then it must be the top statement of any style sheet either in external or internal css
Hello World !
<style>
  @import url('cssFilePath.css');   /* must be the top 
                                      statement of style sheet */
  /*Other css properties*/
  #box {
    background-color: #e95f73;
    ........
  }
</style>
@importsubject
@importclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('external.css');
#box {
  background-color: #e95f73;
  width:80%;
  padding:10px;
  text-align:center;
  margin:auto;
}
</style>
</head>
<body>
<h1 id="box">Hello World !</h1>
</body>
</html>

  • CSS Grid
❮ Prev User Interface
Next ❯CSS Grid
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯