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
Right align multiple elements in the same row under div in css
Method 1: float:right In addition, floating will ...
Exploration and correction of the weird behavior of parseInt() in js
Background: I wonder if you have noticed that if ...
Vue implements page caching function
This article example shares the specific code of ...
A brief discussion on HTML table tags
Mainly discuss its structure and some important pr...
How to implement one-click deployment of nfs in linux
Server Information Management server: m01 172.16....
How to start a Java program in docker
Create a simple Spring boot web project Use the i...
Solution for Baidu site search not supporting https (tested)
Recently, https has been enabled on the mobile ph...
Solve the problem of regular automatic file deletion by crontab+shell script under Centos7
Problem description: Recently, there is a demand ...
Summary of the process and common problems of connecting VS2019 to MySQL database
I started configuring various environments this a...
Tutorial on installing mysql8 on linux centos7
1. RPM version installation Check if there are ot...
React Router V6 Updates
Table of contents ReactRouterV6 Changes 1. <Sw...
How to add automatic completion commands for docker and kubectl on Mac
Introduction to kubectl kubectl is a command line...
MySQL 8.0.17 decompression version installation and configuration method graphic tutorial
I'll record the problems I encountered during...
Detailed explanation of selinux basic configuration tutorial in Linux
selinux ( Security-Enhanced Linux) is a Linux ker...
Interpretation of Vue component registration method
Table of contents Overview 1. Global Registration...