Share the learning summary of media queries in CSS3

Media queries in CSS3 are often used to create front-end responsive design pages, where you can share the learning summary of media queries in CSS3, including compatibility problem resolution in IE8, and the need for friends to refer to

One, Media Queries supported properties

Second, the key word
And-combine multiple media queries not-exclude some type of media development only-used to define a particular type of media

III. Reference Style Examples

<link rel= "stylesheet" media= "All" href= "Style.css"/>   <link rel= "stylesheet" media= "screen and ( min-width:980px) "href=" Desktop.css "/>   <link rel=" stylesheet "media=" screen and (min-width:768px) and ( max-width:980px) "href=" Pad.css "/>   <link rel=" stylesheet "media=" screen and (min-width:480) and (max-width: 768px) "href=" Phone.css "/>   <link rel=" stylesheet "media=" screen and (max-width:320px) "href=" Small.css "/ >

Four, inline style example

@media screen and (min-width:980px) {       //css code}   @screen and (min-width:768px) and (max-width:980px) {       //cs S code}   @screen and (min-width:480) and (max-width:768px) {       //css code}   @screen and (max-width:320px) {       CSS code}   @media screen and (max-device-width:480px) {       //max-device-width equals 480px}   @media screen and ( DEVICE-ASPECT-RATIO:16/9), screen and (DEVICE-ASPECT-RATIO:16/10) {       //device aspect ratio   } @media all and   ( orientation:portrait) {       //vertical screen   }   @media all and (Orientation:landscape) {       //horizontal screen   }

Five, the I8 compatibility problem solves
Source of the problem:
Media is used in the project's CSS file to automatically adjust the layout according to the size of the window, but IE8 and the following versions of the browser do not support CSS3 media queries, which is @media screen and (max-width:900px) The CSS code inside is not executed,

@media screen and (max-width:900px) {     ...   }

This is good, ah, there are many people on the Internet to propose solutions, the simplest way is:
IE8 and previous browsers do not support CSS3 media queries, and you can add css3-mediaqueries.js to the page to solve this problem.

<!--[if Lt IE 9]>    <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script><! [endif]-->

So, it is very simple, the result is very disappointed Ah, the project how to try how can not, but also hope to try to be feasible colleagues to point out ah, no way can only adopt another slightly more complex method, is also learned from the Internet, here to consider two problems, one is only IE8 and its lower version to do this processing, The second is that only the browser shrinks to a certain size range before doing this processing. Here's how:
Principle: The use of jquery, in fact, do not understand, will be used on the line, and then in the HTML according to the need to change the corresponding CSS file
Workaround:
Add the following code after the common JS file for all pages:

/*adjust the layout in IE8 and lower than IE8 when the browser is Narrow*/function processlowerienavigate () {var i SIE = document.all?      1:0;  if (Isie = = 1) {if (Navigator.userAgent.indexOf ("MSIE7.0") > 0 | | navigator.userAgent.indexOf ("MSIE 8.0")            > 0) {//var doc=document;              var link=document.createelement ("link");              Link.setattribute ("rel", "stylesheet");              Link.setattribute ("type", "text/css");              Link.setattribute ("id", "Size-stylesheet");              Link.setattribute ("href", "");              var heads = document.getElementsByTagName ("Head");              if (heads.length) heads[0].appendchild (link);              else Document.documentElement.appendChild (link);              document.write ("<script type= ' text/javascript ' src= ' jquery.min.js ' ></script>"); document.write ("<script type= ' text/javascript ' src= ' media_screen.js ' ></scRipt> ");   }}} var lowerIE8 = Processlowerienavigate ();       The contents of the Media_screen.js file are as follows, directly from the online copy:function adjuststyle (width) {width = parseint (width);        if (Width < 902) {//alert ("<900");//alert (width);       $ ("#size-stylesheet"). attr ("href", "navigatelowerie8.css");  } else {//alert (">900");       alert (width);        $ ("#size-stylesheet"). attr ("href", "");       }} $ (function () {Adjuststyle ($ (this). width ());       $ (window). Resize (function () {Adjuststyle ($ (this). width ());   }); });

The Navigatelowerie8.css file is the page layout that IE8 its low-version browser when it shrinks. OK, everything is really done.