让IE适用CSS3 Media Query完成回应式Web设计方案

2021-03-20 22:03 jianzhan

现如今的显示屏辨别率,小至320px(iPhone),大到2560px乃至更高(大显示信息器),转变范畴巨大。除应用传统式的台式机,客户会愈来愈多的根据手机上、上网本、iPad1类的平板机器设备来访问网页页面。这类状况下,固定不动宽度的设计方案计划方案可能显得越发不符合理。网页页面必须有更好的融入性,其合理布局构造要保证依据不一样的机器设备及显示屏辨别率开展回应调剂。接下来,大家将掌握1下如何根据html5和css3 Media Queries(媒体查寻)有关技术性来完成跨机器设备跨访问器的回应式web设计方案计划方案。

大家必须在网页页面中启用css3-mediaqueries.js文档,来协助IE8或是以前的版本号适用CSS3 media queries:


拷贝编码
编码以下:

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

接下来,大家要建立css款式表,并在网页页面中启用:


拷贝编码
编码以下:

<link href="media-queries.css" rel="stylesheet" type="text/css">

延展性照片


拷贝编码
编码以下:

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

CSS里width: auto\9 是甚么意思?


拷贝编码
编码以下:

这是专业对于ie的hack写法“\9″
在IE6/IE7/IE8/IE9/IE10下起效
“\0” 在 IE8/IE9/IE10下起效
“\9\0” 在IE9/IE10下起效

延展性嵌入元素(视頻)


拷贝编码
编码以下:

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

字号全自动调剂的难题(根据-webkit-text-size-adjust:none禁用iPhone中Safari的字号全自动调剂)


拷贝编码
编码以下:

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

网页页面宽度放缩的难题


拷贝编码
编码以下:

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


原文转载自WEB前端开发开发设计(www.css119.com)