Contact for Expert ServicesAdvertise with Ecomspark.

CSS & CSS3 Media Query – An Introduction

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

CSS Print Media Query – CSS style for print

<link rel="stylesheet" href="print.css" media="print"

Different ways to use media query in css?

CSS3 Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site.

The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

@media (query) {
  /* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are min-widthmax-widthmin-height and max-height.

attribute Result
min-width Rules applied for any browser width over the value defined in the query.
max-width Rules applied for any browser width below the value defined in the query.
min-height Rules applied for any browser height over the value defined in the query.
max-height Rules applied for any browser height below the value defined in the query.
orientation=portrait Rules applied for any browser where the height is greater than or equal to the width.
orientation=landscape Rules for any browser where the width is greater than the height.

media_queries

  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
    <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
    <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
    <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
    <style>
      @media (min-width: 500px) and (max-width: 600px) {
        h1 {
          color: fuchsia;
        }

        .desc:after {
          content:" In fact, it's between 500px and 600px wide.";
        }
      }
    </style>

Below is an overview of most of the CSS3 media queries. You can find what queries your browser support and better support your devices.

# Query
1 YES @media all
2 YES @media screen
3 NO @media handheld
4 NO @media aural
5 NO @media braille
6 NO @media embossed
7 NO @media projection
8 NO @media tty
9 NO @media tv
10 NO @media print
11 NO @media 3d-glasses
12 YES @media all and (orientation:landscape)
13 NO @media all and (orientation:portrait)
14 YES @media screen and (min-width : 320px)
15 YES @media screen and (min-width : 480px)
16 YES @media screen and (min-width : 1224px)
17 NO @media screen and (min-width : 1824px)
18 YES @media screen and (min-width : 29em)
19 YES @media screen and (min-width : 35em)
20 NO @media all and (device-aspect-ratio: 2/3)
21 NO @media all and (device-aspect-ratio: 4/3)
22 NO @media all and (device-aspect-ratio: 3/4)
23 NO @media all and (device-aspect-ratio: 3/5)
24 NO @media all and (device-aspect-ratio: 5/3)
25 NO @media all and (device-aspect-ratio: 8/5)
26 NO @media all and (device-aspect-ratio: 15/9)
27 NO @media all and (device-aspect-ratio: 9/16)
28 NO @media all and (device-aspect-ratio: 256/135)
29 NO @media all and (-webkit-device-pixel-ratio: .75)
30 YES @media all and (-webkit-device-pixel-ratio: 1)
31 NO @media screen and (-o-device-pixel-ratio: 1/1)
32 YES @media screen and (resolution: 96dpi)
33 NO @media screen and (-webkit-min-device-pixel-ratio: 1.3)
34 YES @media screen and (-webkit-device-pixel-ratio: 1.5), screen and (resolution: 96dpi)
35 NO @media all and (-webkit-device-pixel-ratio: 1.5)
36 NO @media screen and (-o-device-pixel-ratio: 3/2)
37 NO @media screen and (resolution: 144dpi)
38 NO @media screen and (-webkit-device-pixel-ratio: 1.5), screen and (resolution: 144dpi)
39 NO @media all and (-webkit-min-device-pixel-ratio: 2)
40 NO @media screen and (min-resolution: 192dpi)
41 NO @media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)
42 NO @media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)
43 NO @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
44 NO @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 

 Table Reference – http://cssmediaqueries.com/overview.html

 

 

Add a Comment

Your email address will not be published. Required fields are marked *

Translate »