css3引入@media,可以根據設備特性進行不同的布局,
本文展示的是根據不同屏幕的寬度進行不同的布局,代碼如下:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 針對瀏覽器寬度調整布局 </title><style type="text/css">/* 設置默認的CSS樣式 */#container{text-align: center;margin:auto;width:750px;}#container>div{border:1px solid #aaf;text-align: left;box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left{width:300px;height:260px;float:left;}div#main{width:450px;height:260px;float:left;clear:right;}div#right{width:750px;float:left;}/* 設置當瀏覽器寬度大于1000px時的CSS樣式 */@media screen and (min-width:1000px){#container{text-align:center;margin:auto;width:960px;}#container{border:1px solid #aff;box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding:5px;}div#left{width:240px;float:left;height:260px;}div#main{width:460px;float:left;height:260px;clear:none;}div#right{width:260px;float:left;height:260px;}}/* 設置當瀏覽器寬度小于480px時的CSS樣式 */@media screen and (max-width: 480px){#container{text-align: center;margin:auto;width:450px;}#container>div{border:1px solid #aaf;box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding:5px;}div#left{width:450px;float:left;height:150px;}div#main{width:450px;float:left;height:260px;clear:both;}div#right{width:450px;float:left;height:170px;}}</style>
</head>
<body><div id="container"><div id ="left"><h2>紫薯布丁紫薯布丁</h2><ul><li>紫薯布丁紫薯布丁</li><li>紫薯布丁紫薯布丁</li><li>紫薯布丁紫薯布丁</li></ul></div><div id = "main"><h2>紫薯布丁紫薯布丁</h2>瘋紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁？？？？紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯紫薯布丁紫薯布丁</div><div id="right"><h2>紫薯布丁紫薯布丁</h2>..紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</div></div></body>
</html>
以下是寬度為847.27的屏幕的效果
以下是寬度為463.64px的效果:
參考《瘋狂H5+CSS3+JS講義》(第2版)P319~P320
![[轉載]dbms_lob用法小結](http://pic.xiahunao.cn/[轉載]dbms_lob用法小結)
)
)
)
