Let IE support CSS3 Media Query to achieve responsive web design
|
Today's screen resolutions range from as small as 320px (iPhone) to as large as 2560px or even higher (large monitors), with a huge range of variations. In addition to using traditional desktop computers, users will increasingly browse web pages through mobile phones, netbooks, and tablet devices such as iPads. In this case, the fixed width design will become increasingly unreasonable. The page needs to be more adaptable, and its layout structure needs to be responsive and adjustable according to different devices and screen resolutions. Next, we will learn how to implement cross-device and cross-browser responsive web design solutions through HTML5 and CSS3 Media Queries related technologies. Copy code The code is as follows:<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> Next, we need to create a CSS style sheet and call it in the page: Copy code The code is as follows:<link href="media-queries.css" rel="stylesheet" type="text/css"> Elastic pictures Copy code The code is as follows:img {max-width:100%;height:auto;width:auto\9; /* ie8 */} What does width: auto\9 mean in CSS? Copy code The code is as follows:This is a hack for IE. Effective in IE6/IE7/IE8/IE9/IE10 “\0” is effective in IE8/IE9/IE10 “\9\0” is effective in IE9/IE10 Elastic inline elements (video) Copy code The code is as follows:.video embed,.video object,.video iframe {width: 100%;height: auto;} The problem of automatic font size adjustment (disable automatic font size adjustment in Safari on iPhone via -webkit-text-size-adjust:none) Copy code The code is as follows:html{-webkit-text-size-adjust:none;} Page width scaling issue Copy code The code is as follows:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> The original article is reproduced from WEB front-end development (www.css119.com) |
<<: A Brief Discussion on the Navigation Window in Iframe Web Pages
>>: How to reduce the root directory of XFS partition format in Linux
Recommend
Tips for using DIV container fixed height in IE6 and IE7
There are many differences between IE6 and IE7 in ...
Vue implements the method of displaying percentage of echart pie chart legend
This article mainly introduces the pie chart data...
In-depth explanation of binlog in MySQL 8.0
1 Introduction Binary log records SQL statements ...
Detailed explanation of transactions and indexes in MySQL database
Table of contents 1. Affairs: Four major characte...
Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)
cause I recently started to refactor the project,...
Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix
Solution to MySQLSyntaxErrorException when connec...
HTML Basics Must-Read---Detailed Explanation of Forms, Image Hotspots, Web Page Division and Splicing
1. Form <form id="" name=""...
Detailed explanation of the difference between the default value of the CSS attribute width: auto and width: 100%
width: auto The child element (including content+...
A detailed explanation of the overlapping and soft color matching method in web page color matching
This article does not have any quibbles, it is jus...
Detailed explanation of the API in Vue.js that is easy to overlook
Table of contents nextTick v-model syntax sugar ....
vite2.x implements on-demand loading of ant-design-vue@next components
1. Use version vite:2.0 ant-design-vue: 2.0.0-rc....
JavaScript css3 to implement simple video barrage function
This article attempts to write a demo to simulate...
Solution to installing vim in docker container
Table of contents The beginning of the story Inst...
HTML structured implementation method
DIV+css structure Are you learning CSS layout? Sti...
HTML Form Tag Tutorial (4):
Suppose now you want to add an item like this to ...