PC端和移动端共用一套代码1.允许自动调整网页宽度在网页代码头部，添加一行viewportmeta标签所有主流浏览器都支持这个设置，包括IE9。对于那些旧的浏览器（主要是IE6、7、8），你需要使用css3-mediaqueries.js2。不要使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用绝对宽度的布局元素。这个很重要，可以用width:~%或者width:auto;3、Relativesizefont字体不能使用绝对大小（px），只能使用相对大小（em）body{font:normal100%Helvetica,Arial,sans-serif;}上面代码指定字体大小默认为100%页面大小，即16像素h1{font-size:1.5em;}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）small{font-size:0.875em;}小元素的大小是默认大小的0.875倍，即14个像素（14/16=0.875）4.流式布局fluidgrid流式布局的意思是，每块的位置是浮动的，不固定。主要{浮动：对;宽度：70%；}.leftBar{浮动：左；width:25%;}float的好处是如果宽度太小，放不下两个元素，后一个元素会自动滚动到前一个元素的底部，水平方向不会溢出（overflow），避免水平滚动条的出现。另外，使用绝对定位（position:absolute）也可以很小心5.选择加载CSS“响应式网页设计”的核心是CSS3引入的MediaQuery模块如果屏幕宽度在400像素到600像素之间，加载smallScreen.css文件6.@mediarulesofCSS在同一个CSS文件中，也可以选择应用不同的根据不同屏幕分辨率的CSS规则//屏幕宽度小于400像素@mediascreenand(max-device-width:400px){.column{float:none;宽度：自动；}#sidebar{显示：无；}}7.自适应图像（fluidimage）图像自动缩放img,object{max-width:100%;}旧版IE不支持max-width，只好写成img{width:100%;}在windows平台上缩放图片时，可能会出现图片失真。这时候可以尝试使用IE的专有命令：img{-ms-interpolation-mode:bicubic;}或者EthanMarcotte的imgSizer.jsaddLoadEvent(function(){varimgs=document.getElementById(“content”).getElementsByTagName(“img”);imgSizer.collat??e(imgs);});
