Media queries

Hi everyone, this is a very interactive post about @media queries. In this post I am going to explain every types of media queries and their rules how it should maintain and how you should implement in you page.
We use @media query for responsive purpose. In css3 we have certain feature to add @media query in the CSS pages for showing the same website into the different device. Now day's responsive one of the most important benchmark every website asked. Your website should have responsive features unless it will not present in the google page ranking. So almost every designer use @media queries for responsive purpose. But we are using some basic @media queries without knowing that @media query is such a powerful feature and it’s also help you to reduce JavaScript from the website.

The basic @media query is:

@media only screen and (min-width: 991px) {
body {
background: #73AD21;
}
}


The basic structure is we should start media query with @media then for which condition stand for like only and then the media types of it like screen then its condition(if statement) like min-width which will work only the condition match and its value like 991px.
In this code we are mention that if the device screen minimum width 991px then the background of the site will be #73AD21(green).

We have different Media type like

1. All - Stands for all media types.

   It will affect every section of the page.
   @media only screen{
.small-push-0{
position: relative;
left: 0;
right: auto
}
}
Use in zurb foundation.
   

2. Print - Stand for print type.

   it will work for the print section only
   @media print {
*,*:before,*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
} Use in Bootstrap.
   

3. Screen - Stand for devices screen sizes

   It will work for the given conditional screen size.
   @media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

   

4. Speech - Stand for screen readers that reads the page out loud.

   
   @media speech {
body { voice-family: Paul }
}

   

Media Features

1. aspect-ratio

   The ratio between the width and the height of the viewport.
   @media screen and (min-aspect-ratio: 8/5) {
// Put you css code
}
This media query describes the phys¬i¬cal aspect ratio of the screen itself.

2. color

   The number of bits per color component for the output device.
   @media all and (min-color: 4) {
// Put you css code
}


3. color-index

   The number of colors the device can display.
   To apply a style sheet to indexed color devices with at least 256 colors:
   @media all and (min-color-index: 256)
{
// Put you CSS code
}


4. device-aspect-ratio

   The ratio between the width and the height of the device.
   The following selects a special style sheet to use for widescreen displays.
   @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
// Put you CSS code
}


5. device-height

   The height of the device, like computer screen.
   @media screen and (max-device-height: 799px) {
// Put you CSS code
}


6. device-width

   The width of the device, like computer screen.
   @media screen and (max-device-width: 799px) {
// Put you CSS code
}


7. grid

   Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is
   1. Otherwise it is zero.
   @media handheld and (grid) and (max-width: 15em) {
// Put you CSS code
}


8. monochrome

   To apply a style sheet to all monochrome devices.
   The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).
   @media all and (min-monochrome: 8) {
// Put you CSS code
}
To apply a style sheet to monochrome devices with at least 8 bits per pixel.
   

9. max-width

   The maximum width of the display area, such as a browser window.
   @media (max-width: 600px) {
// Put you CSS code
}


10. min-device-width & min-device-height

    @media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {
// Put you CSS code
}
Work for different devices with some the certain criteria like -webkit-min-device-pixel-ratio: 1. this will work for iPad mini. If we want to use device only then it will work for all the devices but we need to separate with extend condition like.

    a. iPad Portrait

    @media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
// Put you CSS code
}


    b. iPad Landscape

    @media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
// Put you CSS code
}


    c. Kindle Fire HD 7 Portrait and Landscape

    @media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
// Put you CSS code
}


11. min-height & min-width

    The minimum height/width of the display area, such as a browser window.
    @media only screen
and (min-height: 320px)
{
// Put you CSS code
}
@media only screen
and (min-width: 320px)
{
// Put you CSS code
}



12. resolution

    Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).
    @media print and (min-resolution: 300dpi) {
// Put you CSS code
}


13. orientation

    To apply a style sheet only in portrait orientation.
    @media all and (orientation: portrait) {
// Put you CSS code
}
@media all and (orientation: landscape) {
// Put you CSS code
}


14. scan

    The scanning process of the output device
    Value: progressive | interlace
    Describes the scanning process of television output devices.
    @media tv and (scan: progressive) {
// Put you CSS code
}
@media tv and (scan: interlace) {
// Put you CSS code
}


Now we have some separators like

1. And

   @media (min-width: 991px) and (max-width: 1200px) {
body { background: #73AD21; }
}
The and separator work like the body color will be #73AD21 if the device will min 991px and max 1200px
   

2. Comma

   @media (max-width: 991px), (min-width: 800px) {
body { background: #73AD21; }
}
Technically it will work like two different media queries.It will work for the both the cases max width 991 and min width 800
   

3. Not

   @media not all and (max-width: 1200px) {
body { background: #73AD21; }
}
Reverse the logic with not. Now if the device width increases more than 1200px the background color will change.
   

Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.