Enable IE to support CSS3 Media query for Responsive web design

Today's screen resolution, as small as 320px (IPhone), large to 2560px or even higher (large display), the range is great. In addition to the use of traditional desktops, users will be more and more throughMobile Phone, netbooks, ipad-type tablet devices to browse the page. In this case, the fixed width of the design will appear more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted to respond to different devices and screen resolutions. NextI'mWe will look at how to passHTML5AndCSS3Media Queries (media query)-related technologies to enable cross-device, cross-browser responseWebDesign solutions.
We need to call the Css3-mediaqueries.js file in the page to help IE8 or the previous version support CSS3 media queries:

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

Next, we'll create a CSS style sheet and call it in the page:

<link href= "Media-queries.css" rel= "stylesheet" type= "Text/css" >

Elastic picture

img {max-width:100%;height:auto;width:auto9;/* IE8 */}

Elastic inline Elements (video)

. Video Embed,.video Object,.video iframe {width:100%;height:auto;}

Problem with font size auto-adjustment (Disable auto-resizing of safari in iphone via-webkit-text-size-adjust:none)

HTML {-webkit-text-size-adjust:none;}

Problem with page width scaling

<meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0; " >

Enable IE to support CSS3 Media query for Responsive web design