CSS MET JQUERY

In CSS2 we had the possibility for different media types such as screen, print individual style sheets to a web page link. CSS3 goes one step further with the so-called media queries. Media queries are expressions that you can add to a media type, which tells you that certain CSS rules only apply to devices that meet certain conditions specified in the media query. For example you can separate lines or separate stylesheets style designs for large screens (desktop, labtops), or just for small screens of mobile phones, smartphones and tablets. The main benefit is that you no longer need to remember content to devices with small screens because you much more flexibility in customizing the screen layout for different resolutions. Below is an example of how a media query might look there. The significance of these media query in browser windows with a horizontal resolution of 700 px or less the background color of all the DOM elements with class = "foo" red (# ff0000) is.

@ Media screen  and ( max-width : 700px ) {
  . Foo {
      background : # f00 ;
   }
}

If you in the head section of your HTML document to link to an external stylesheet (example.css) then you write:

1
< link  rel = "stylesheet"  media = "screen and (max-width: 700px)"  href = "example.css"  /> k

BROWSER SUPPORT

Mozilla: Firefox 3.5 +
Webkit: Chrome, Safari 3 +
Opera 7 +
Internet Explorer 9
EXAMPLE 1: MEDIA QUERY THAT THE BACKGROUND COLOR OF AN ELEMENT

DEPENDENT ON THE SCREEN.

First go to the demo page and resize the browser window from very large to very small.

THE CSS ARTICLE_STYLES.CSS

. Container {
  border : solid  1px  # 666 ;
  padding : 5px  10px ;
  margin : 40px ;
}  
 
@ Media screen  and ( max-width : 600px ) {
  . Foo {
  background : # 11a456 ;
  : # 000 ;
  }
}  
 
@ Media screen  and ( min-width : 900px ) {
  . Foo 2  {
  background : # 00F ;
  : # FFF ;
  }
}  
 
/ * Min-width and max-width * /
@ Media screen  and ( min-width : 600px ) and ( max-width : 900px ) {
  . Foo 3  {
  background : # f00 ;
  }
}  
 
/ * Max width device * /
@ Media screen  and (max-device- width : 480px ) {
  . Iphone {
  background : # aaa ;
  }
}

THE HTML CODE

< html >
< head >
    < title > CSS3 Media queries 
    < meta  http-equiv = "Content-Type"  content = "text / html utf-8"  />
    < link  href = "css / articles_styles.css"  rel = "stylesheet"  type = "text / css"  media = "screen" >

< body >
    < div   class = "foo container" >
        This element is green when the browser window smaller than 600px
    
    < div   class = "foo2 container" >
        This element is blue when the browser window is larger than 900px
    
    < div   class = "foo3 container" >
        This element is red when the browser window is larger than but smaller than 600px 900px
    
    < div   class = "foo4 container" >
        This element is gray if the display on a mobile device is smaller than 480px