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
Detailed explanation of the this pointing problem of JavaScript prototype objects
Table of contents 1. this points to 2. Modify thi...
Web Design Summary
<br />From the birth of my first personal pa...
Vue implements a movable floating button
This article example shares the specific code of ...
Summary of some tips on MySQL index knowledge
Table of contents 1. Basic knowledge of indexing ...
Problems and solutions for MYSQL5.7.17 connection failure under MAC
The problem that MYSQL5.7.17 cannot connect under...
Detailed explanation of Javascript string methods
Table of contents String length: length charAt() ...
Detailed process of using vmware to test PXE batch installation server
Table of contents 1. Preparation 1. Prepare the e...
MySQL case when group by example
A mysql-like php switch case statement. select xx...
How to set static IP for Ubuntu 18.04 Server
1. Background Netplan is a new command-line netwo...
Detailed explanation of the difference between docker-compose ports and expose
There are two ways to expose container ports in d...
Implementation of Nginx filtering access logs of static resource files
Messy log Nginx in daily use is mostly used as bo...
How to print highlighted code in nodejs console
Preface When the code runs and an error occurs, w...
How to use skeleton screen in vue project
Nowadays, application development is basically se...
Problems and solutions for installing Docker on Alibaba Cloud
question When installing Docker using Alibaba Clo...
HTML user registration page settings source code
Design the web page shown above: <!DOCTYPE htm...