<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"/><!--[if lt ie 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" type='text/css' media="screen and (max-device-width:400px)" href="tinyscreen.css" /> <link rel="stylesheet" media="screen and(min-width:400px)and(max-device-width:600px;)" href="small.css" /> @import url("tinyscreen.css") screen and (max-device-width:400px); <style> @media screen and(max-device-width:400px){ .column{ float: none; width: auto; } .sidebar{ display: none; } } body{ font: normal 100% arial sans-serif helvetica;//字体大小默认是16PX }h1{ font-size: 1.5em;1.5*16=24px}.de{ width: 100%; width: auto; }.fl{ float:left; width: 70%;//避免了溢出，水平滚动条的出现}.fr{ float: right; width: 25%;}img,object{ max-width: 100%;}img{ width: 100px;//老版本不支持 max-width -ms-interpolation-mode:bicubic;//windows平台缩放图片时，可能出现图片失真} </style></head><body> <!-- --></body></html><!-- 自适应界面的制作1，在头部加入viewport,只默认的宽度，和高度//ie9向上会支持这个属性，ie6,ie7,ie8导入css3-mediaqueris.js -->