根据屏幕的宽度使用不同的css-文件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/jl_public.css?v=11"/> <link rel="stylesheet" media="screen and (min-width:800px) and (max-device-width:1200px)" href="css/c1.css"/> <link rel="stylesheet" media="screen and (max-width:800px)" href="css/c2.css"/> <!--[if lt IE 9]> <script src="css3-mediaqueries.js" type="text/javascript"></script> <![endif]--> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> </head> <body> <div class="container"> <ul class="clearfix"> <li> <img src="3.jpg" alt=""/> </li> <li> <img src="3.jpg" alt=""/> </li> <li> <img src="3.jpg" alt=""/> </li> <li> <img src="3.jpg" alt=""/> </li> <li> <img src="3.jpg" alt=""/> </li> <li> <img src="3.jpg" alt=""/> </li> </ul> </div> </body> </html>
if(typeof Object.create!=="function"){Object.create=function(o){function F(){};F.prototype=o;return new F()}}var ua={toString:function(){return navigator.userAgent},test:function(s){return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1}};ua.version=(ua.toString().toLowerCase().match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1];ua.webkit=ua.test("webkit");ua.gecko=ua.test("gecko")&&!ua.webkit;ua.opera=ua.test("opera");ua.ie=ua.test("msie")&&!ua.opera;ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined";ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined";ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined";var domReady=function(){var _1=[];var _2=function(){if(!arguments.callee.done){arguments.callee.done=true;for(var i=0;i<_1.length;i++){_1[i]()}}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",_2,false)}if(ua.ie){(function(){try{document.documentElement.doScroll("left");document.body.length}catch(e){setTimeout(arguments.callee,50);return}_2()})();document.onreadystatechange=function(){if(document.readyState==="complete"){document.onreadystatechange=null;_2()}}}if(ua.webkit&&document.readyState){(function(){if(document.readyState!=="loading"){_2()}else{setTimeout(arguments.callee,10)}})()}window.onload=_2;return function(fn){if(typeof fn==="function"){if(_2.done){fn()}else{_1[_1.length]=fn}}return fn}}();var cssHelper=function(){var _3={BLOCKS:/[^\s{][^{]*\{(?:[^{}]*\{[^{}]*\}[^{}]*|[^{}]*)*\}/g,BLOCKS_INSIDE:/[^\s{][^{]*\{[^{}]*\}/g,DECLARATIONS:/[a-zA-Z\-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url\(['"]?([^\/\)'"][^:\)'"]+)['"]?\)/g,REDUNDANT_COMPONENTS:/(?:\/\*([^*\\\\]|\*(?!\/))+\*\/|@import[^;]+;|@-moz-document\s*url-prefix\(\)\s*{(([^{}])+{([^{}])+}([^{}])+)+})/g,REDUNDANT_WHITESPACE:/\s*(,|:|;|\{|\})\s*/g,MORE_WHITESPACE:/\s{2,}/g,FINAL_SEMICOLONS:/;\}/g,NOT_WHITESPACE:/\S+/g};var _4,_5=false;var _6=[];var _7=function(fn){if(typeof fn==="function"){_6[_6.length]=fn}};var _8=function(){for(var i=0;i<_6.length;i++){_6[i](_4)}};var _9={};var _a=function(n,v){if(_9[n]){var _b=_9[n].listeners;if(_b){for(var i=0;i<_b.length;i++){_b[i](v)}}}};var _c=function(_d,_e,_f){if(ua.ie&&!window.XMLHttpRequest){window.XMLHttpRequest=function(){return new ActiveXObject("Microsoft.XMLHTTP")}}if(!XMLHttpRequest){return""}var r=new XMLHttpRequest();try{r.open("get",_d,true);r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest")}catch(e){_f();return}var _10=false;setTimeout(function(){_10=true},5000);document.documentElement.style.cursor="progress";r.onreadystatechange=function(){if(r.readyState===4&&!_10){if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){_e(r.responseText)}else{_f()}document.documentElement.style.cursor="";r=null}};r.send("")};var _11=function(_12){_12=_12.replace(_3.REDUNDANT_COMPONENTS,"");_12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1");_12=_12.replace(_3.MORE_WHITESPACE," ");_12=_12.replace(_3.FINAL_SEMICOLONS,"}");return _12};var _13={mediaQueryList:function(s){var o={};var idx=s.indexOf("{");var lt=s.substring(0,idx);s=s.substring(idx+1,s.length-1);var mqs=[],rs=[];var qts=lt.toLowerCase().substring(7).split(",");for(var i=0;i<qts.length;i++){mqs[mqs.length]=_13.mediaQuery(qts[i],o)}var rts=s.match(_3.BLOCKS_INSIDE);if(rts!==null){for(i=0;i<rts.length;i++){rs[rs.length]=_13.rule(rts[i],o)}}o.getMediaQueries=function(){return mqs};o.getRules=function(){return rs};o.getListText=function(){return lt};o.getCssText=function(){return s};return o},mediaQuery:function(s,mql){s=s||"";var not=false,_14;var exp=[];var _15=true;var _16=s.match(_3.NOT_WHITESPACE);for(var i=0;i<_16.length;i++){var _17=_16[i];if(!_14&&(_17==="not"||_17==="only")){if(_17==="not"){not=true}}else{if(!_14){_14=_17}else{if(_17.charAt(0)==="("){var _18=_17.substring(1,_17.length-1).split(":");exp[exp.length]={mediaFeature:_18[0],value:_18[1]||null}}}}}return{getList:function(){return mql||null},getValid:function(){return _15},getNot:function(){return not},getMediaType:function(){return _14},getExpressions:function(){return exp}}},rule:function(s,mql){var o={};var idx=s.indexOf("{");var st=s.substring(0,idx);var ss=st.split(",");var ds=[];var dts=s.substring(idx+1,s.length-1).split(";");for(var i=0;i<dts.length;i++){ds[ds.length]=_13.declaration(dts[i],o)}o.getMediaQueryList=function(){return mql||null};o.getSelectors=function(){return ss};o.getSelectorText=function(){return st};o.getDeclarations=function(){return ds};o.getPropertyValue=function(n){for(var i=0;i<ds.length;i++){if(ds[i].getProperty()===n){return ds[i].getValue()}}return null};return o},declaration:function(s,r){var idx=s.indexOf(":");var p=s.substring(0,idx);var v=s.substring(idx+1);return{getRule:function(){return r||null},getProperty:function(){return p},getValue:function(){return v}}}};var _19=function(el){if(typeof el.cssHelperText!=="string"){return}var o={mediaQueryLists:[],rules:[],selectors:{},declarations:[],properties:{}};var _1a=o.mediaQueryLists;var ors=o.rules;var _1b=el.cssHelperText.match(_3.BLOCKS);if(_1b!==null){for(var i=0;i<_1b.length;i++){if(_1b[i].substring(0,7)==="@media "){_1a[_1a.length]=_13.mediaQueryList(_1b[i]);ors=o.rules=ors.concat(_1a[_1a.length-1].getRules())}else{ors[ors.length]=_13.rule(_1b[i])}}}var oss=o.selectors;var _1c=function(r){var ss=r.getSelectors();for(var i=0;i<ss.length;i++){var n=ss[i];if(!oss[n]){oss[n]=[]}oss[n][oss[n].length]=r}};for(i=0;i<ors.length;i++){_1c(ors[i])}var ods=o.declarations;for(i=0;i<ors.length;i++){ods=o.declarations=ods.concat(ors[i].getDeclarations())}var ops=o.properties;for(i=0;i<ods.length;i++){var n=ods[i].getProperty();if(!ops[n]){ops[n]=[]}ops[n][ops[n].length]=ods[i]}el.cssHelperParsed=o;_4[_4.length]=el;return o};var _1d=function(el,s){el.cssHelperText=_11(s||el.innerHTML);return _19(el)};var _1e=function(){_5=true;_4=[];var _1f=[];var _20=function(){for(var i=0;i<_1f.length;i++){_19(_1f[i])}var _21=document.getElementsByTagName("style");for(i=0;i<_21.length;i++){_1d(_21[i])}_5=false;_8()};var _22=document.getElementsByTagName("link");for(var i=0;i<_22.length;i++){var _23=_22[i];if(_23.getAttribute("rel").indexOf("style")>-1&&_23.href&&_23.href.length!==0&&!_23.disabled){_1f[_1f.length]=_23}}if(_1f.length>0){var c=0;var _24=function(){c++;if(c===_1f.length){_20()}};var _25=function(_26){var _27=_26.href;_c(_27,function(_28){_28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)");_26.cssHelperText=_28;_24()},_24)};for(i=0;i<_1f.length;i++){_25(_1f[i])}}else{_20()}};var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"};var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null};var _2b=function(_2c,v){if(_2a[_2c]!==null){if(_29[_2c]==="array"){return(_2a[_2c]=_2a[_2c].concat(v))}else{var c=_2a[_2c];for(var n in v){if(v.hasOwnProperty(n)){if(!c[n]){c[n]=v[n]}else{c[n]=c[n].concat(v[n])}}}return c}}};var _2d=function(_2e){_2a[_2e]=(_29[_2e]==="array")?[]:{};for(var i=0;i<_4.length;i++){_2b(_2e,_4[i].cssHelperParsed[_2e])}return _2a[_2e]};domReady(function(){var els=document.body.getElementsByTagName("*");for(var i=0;i<els.length;i++){els[i].checkedByCssHelper=true}if(document.implementation.hasFeature("MutationEvents","2.0")||window.MutationEvent){document.body.addEventListener("DOMNodeInserted",function(e){var el=e.target;if(el.nodeType===1){_a("DOMElementInserted",el);el.checkedByCssHelper=true}},false)}else{setInterval(function(){var els=document.body.getElementsByTagName("*");for(var i=0;i<els.length;i++){if(!els[i].checkedByCssHelper){_a("DOMElementInserted",els[i]);els[i].checkedByCssHelper=true}}},1000)}});var _2f=function(d){if(typeof window.innerWidth!="undefined"){return window["inner"+d]}else{if(typeof document.documentElement!="undefined"&&typeof document.documentElement.clientWidth!="undefined"&&document.documentElement.clientWidth!=0){return document.documentElement["client"+d]}}};return{addStyle:function(s,_30){var el;if(null!==document.getElementById("css-mediaqueries-js")){el=document.getElementById("css-mediaqueries-js")}else{el=document.createElement("style");el.setAttribute("type","text/css");el.setAttribute("id","css-mediaqueries-js");document.getElementsByTagName("head")[0].appendChild(el)}if(el.styleSheet){el.styleSheet.cssText+=s}else{el.appendChild(document.createTextNode(s))}el.addedWithCssHelper=true;if(typeof _30==="undefined"||_30===true){cssHelper.parsed(function(_31){var o=_1d(el,s);for(var n in o){if(o.hasOwnProperty(n)){_2b(n,o[n])}}_a("newStyleParsed",el)})}else{el.parsingDisallowed=true}return el},removeStyle:function(el){if(el.parentNode){return el.parentNode.removeChild(el)}},parsed:function(fn){if(_5){_7(fn)}else{if(typeof _4!=="undefined"){if(typeof fn==="function"){fn(_4)}}else{_7(fn);_1e()}}},mediaQueryLists:function(fn){cssHelper.parsed(function(_32){fn(_2a.mediaQueryLists||_2d("mediaQueryLists"))})},rules:function(fn){cssHelper.parsed(function(_33){fn(_2a.rules||_2d("rules"))})},selectors:function(fn){cssHelper.parsed(function(_34){fn(_2a.selectors||_2d("selectors"))})},declarations:function(fn){cssHelper.parsed(function(_35){fn(_2a.declarations||_2d("declarations"))})},properties:function(fn){cssHelper.parsed(function(_36){fn(_2a.properties||_2d("properties"))})},broadcast:_a,addListener:function(n,fn){if(typeof fn==="function"){if(!_9[n]){_9[n]={listeners:[]}}_9[n].listeners[_9[n].listeners.length]=fn}},removeListener:function(n,fn){if(typeof fn==="function"&&_9[n]){var ls=_9[n].listeners;for(var i=0;i<ls.length;i++){if(ls[i]===fn){ls.splice(i,1);i-=1}}}},getViewportWidth:function(){return _2f("Width")},getViewportHeight:function(){return _2f("Height")}}}();domReady(function enableCssMediaQueries(){var _37;var _38={LENGTH_UNIT:/[0-9]+(em|ex|px|in|cm|mm|pt|pc)$/,RESOLUTION_UNIT:/[0-9]+(dpi|dpcm)$/,ASPECT_RATIO:/^[0-9]+\/[0-9]+$/,ABSOLUTE_VALUE:/^[0-9]*(\.[0-9]+)*$/};var _39=[];var _3a=function(){var id="css3-mediaqueries-test";var el=document.createElement("div");el.id=id;var _3b=cssHelper.addStyle("@media all and (width) { #"+id+" { width: 1px !important; } }",false);document.body.appendChild(el);var ret=el.offsetWidth===1;_3b.parentNode.removeChild(_3b);el.parentNode.removeChild(el);_3a=function(){return ret};return ret};var _3c=function(){_37=document.createElement("div");_37.style.cssText="position:absolute;top:-9999em;left:-9999em;"+"margin:0;border:none;padding:0;width:1em;font-size:1em;";document.body.appendChild(_37);if(_37.offsetWidth!==16){_37.style.fontSize=16/_37.offsetWidth+"em"}_37.style.width=""};var _3d=function(_3e){_37.style.width=_3e;var _3f=_37.offsetWidth;_37.style.width="";return _3f};var _40=function(_41,_42){var l=_41.length;var min=(_41.substring(0,4)==="min-");var max=(!min&&_41.substring(0,4)==="max-");if(_42!==null){var _43;var _44;if(_38.LENGTH_UNIT.exec(_42)){_43="length";_44=_3d(_42)}else{if(_38.RESOLUTION_UNIT.exec(_42)){_43="resolution";_44=parseInt(_42,10);var _45=_42.substring((_44+"").length)}else{if(_38.ASPECT_RATIO.exec(_42)){_43="aspect-ratio";_44=_42.split("/")}else{if(_38.ABSOLUTE_VALUE){_43="absolute";_44=_42}else{_43="unknown"}}}}}var _46,_47;if("device-width"===_41.substring(l-12,l)){_46=screen.width;if(_42!==null){if(_43==="length"){return((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44))}else{return false}}else{return _46>0}}else{if("device-height"===_41.substring(l-13,l)){_47=screen.height;if(_42!==null){if(_43==="length"){return((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44))}else{return false}}else{return _47>0}}else{if("width"===_41.substring(l-5,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;if(_42!==null){if(_43==="length"){return((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44))}else{return false}}else{return _46>0}}else{if("height"===_41.substring(l-6,l)){_47=document.documentElement.clientHeight||document.body.clientHeight;if(_42!==null){if(_43==="length"){return((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44))}else{return false}}else{return _47>0}}else{if("orientation"===_41.substring(l-11,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;_47=document.documentElement.clientHeight||document.body.clientHeight;if(_43==="absolute"){return(_44==="portrait")?(_46<=_47):(_46>_47)}else{return false}}else{if("aspect-ratio"===_41.substring(l-12,l)){_46=document.documentElement.clientWidth||document.body.clientWidth;_47=document.documentElement.clientHeight||document.body.clientHeight;var _48=_46/_47;var _49=_44[1]/_44[0];if(_43==="aspect-ratio"){return((min&&_48>=_49)||(max&&_48<_49)||(!min&&!max&&_48===_49))}else{return false}}else{if("device-aspect-ratio"===_41.substring(l-19,l)){return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0]}else{if("color-index"===_41.substring(l-11,l)){var _4a=Math.pow(2,screen.colorDepth);if(_42!==null){if(_43==="absolute"){return((min&&_4a>=_44)||(max&&_4a<_44)||(!min&&!max&&_4a===_44))}else{return false}}else{return _4a>0}}else{if("color"===_41.substring(l-5,l)){var _4b=screen.colorDepth;if(_42!==null){if(_43==="absolute"){return((min&&_4b>=_44)||(max&&_4b<_44)||(!min&&!max&&_4b===_44))}else{return false}}else{return _4b>0}}else{if("resolution"===_41.substring(l-10,l)){var res;if(_45==="dpcm"){res=_3d("1cm")}else{res=_3d("1in")}if(_42!==null){if(_43==="resolution"){return((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44))}else{return false}}else{return res>0}}else{return false}}}}}}}}}}};var _4c=function(mq){var _4d=mq.getValid();var _4e=mq.getExpressions();var l=_4e.length;if(l>0){for(var i=0;i<l&&_4d;i++){_4d=_40(_4e[i].mediaFeature,_4e[i].value)}var not=mq.getNot();return(_4d&&!not||not&&!_4d)}};var _4f=function(mql){var mqs=mql.getMediaQueries();var t={};for(var i=0;i<mqs.length;i++){if(_4c(mqs[i])){t[mqs[i].getMediaType()]=true}}var s=[],c=0;for(var n in t){if(t.hasOwnProperty(n)){if(c>0){s[c++]=","}s[c++]=n}}if(s.length>0){_39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false)}};var _50=function(_51){for(var i=0;i<_51.length;i++){_4f(_51[i])}if(ua.ie){document.documentElement.style.display="block";setTimeout(function(){document.documentElement.style.display=""},0);setTimeout(function(){cssHelper.broadcast("cssMediaQueriesTested")},100)}else{cssHelper.broadcast("cssMediaQueriesTested")}};var _52=function(){for(var i=0;i<_39.length;i++){cssHelper.removeStyle(_39[i])}_39=[];cssHelper.mediaQueryLists(_50)};var _53=0;var _54=function(){var _55=cssHelper.getViewportWidth();var _56=cssHelper.getViewportHeight();if(ua.ie){var el=document.createElement("div");el.style.width="100px";el.style.height="100px";el.style.position="absolute";el.style.top="-9999em";el.style.overflow="scroll";document.body.appendChild(el);_53=el.offsetWidth-el.clientWidth;document.body.removeChild(el)}var _57;var _58=function(){var vpw=cssHelper.getViewportWidth();var vph=cssHelper.getViewportHeight();if(Math.abs(vpw-_55)>_53||Math.abs(vph-_56)>_53){_55=vpw;_56=vph;clearTimeout(_57);_57=setTimeout(function(){if(!_3a()){_52()}else{cssHelper.broadcast("cssMediaQueriesTested")}},500)}};window.onresize=function(){var x=window.onresize||function(){};return function(){x();_58()}}()};var _59=document.documentElement;_59.style.marginLeft="-32767px";setTimeout(function(){_59.style.marginTop=""},20000);return function(){if(!_3a()){cssHelper.addListener("newStyleParsed",function(el){_50(el.cssHelperParsed.mediaQueryLists)});cssHelper.addListener("cssMediaQueriesTested",function(){if(ua.ie){_59.style.width="1px"}setTimeout(function(){_59.style.width="";_59.style.marginLeft=""},0);cssHelper.removeListener("cssMediaQueriesTested",arguments.callee)});_3c();_52()}else{_59.style.marginLeft=""}_54()}}());try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}
.container ul li{width:50%;}
.container ul li{width:33.3%}
body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,form,input,textarea,th,td,select{ margin:0; padding:0; } ul,li{ list-style:none; } img{ border:none; vertical-align:middle; } a{ text-decoration:none; color:#333; } table{ border-collapse:collapse; } input,textarea{ outline:none; } textarea{ resize:none; overflow:auto; } .clearfix{zoom:1;} .clearfix:after{content:".";width:0;height:0;visibility:hidden;display:block;clear:both;} @media screen and (min-width:1025px){ html, body{font:16px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;color:#333;margin: 0 auto;} } @media screen and (max-width:1024px) and (min-width:600px){ html, body{font:16px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;color:#333;} } @media screen and (max-width:599px) and (min-width:400px){ html, body{font:14px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;color:#333;} } @media screen and (max-width:399px) { html, body{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;color:#333;} } .tl{text-align:left;} .tr{text-align:right;} .container{width:80%;margin:0 auto;} .container ul{width:100%;} .container ul li{float:left;} .container ul li img{max-width:100%;}
1、首先，在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="css3-mediaqueries.js" type="text/javascript"></script>
<![endif]-->
2、不使用绝对宽度（只能指定百分比宽度）
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
4、使用流式布局（浮动），不要用绝对定位
5、选择加载CSS
<link rel="stylesheet" media="screen and (min-width:800px) and (max-device-width:1200px)" href="css/c1.css"/>
6、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
6、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
