Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to make IE support CSS3 Media Query to achieve responsive Web design. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Today's screen resolutions range from 320px (iPhone) to 2560px or even higher (large monitors). In addition to using traditional desktops, users are increasingly browsing the page through tablet devices such as mobile phones, netbooks and iPad. In this case, the fixed-width design will become more and more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted according to different devices and screen resolutions. Next, we will learn how to use html5 and css3 Media Queries (Media query) related technologies to achieve cross-device and cross-browser responsive web design.

We need to call the css3-mediaqueries.js file in the page to help IE8 or previous versions support CSS3 mediaqueries:

The code is as follows:

Next, we will create an css stylesheet and call the following in the page:

The code is as follows:

Elastic picture

The code is as follows:

Img {max-width:100%;height:auto;width:auto\ 9; / * ie8 * /}

What does width: auto\ 9 mean in CSS?

The code is as follows:

This is the hack "\ 9" specifically for ie.

Effective under IE6/IE7/IE8/IE9/IE10

"\ 0" takes effect under IE8/IE9/IE10

"\ 9\ 0" takes effect under IE9/IE10

Elastic embedded elements (video)

The code is as follows:

.video embed,.video object,.video iframe {width: 100% bot height: auto;}

Problem with automatic font size adjustment (disable automatic font size adjustment of Safari in iPhone via-webkit-text-size-adjust:none)

The code is as follows:

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

The problem of page width scaling

The code is as follows:

This is the end of this article on "how to make IE support CSS3 Media Query to achieve responsive Web design". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.