網頁寬度自動調整，對響應式框
阿新 • • 發佈：2017-06-27
平臺 max-width 兩個 side 滾動 size html css oat
/* */
同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {float: none;width:auto;}
#sidebar {display:none;}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
7.圖片的自適應（fluid image）
除了布局和文本，”自適應網頁設計”還必須實現圖片的自動縮放。這只要一行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);
});
希望上面的內容對您的學習有幫助，不過，有條件的話，最好還是根據不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務器端和客戶端都可以實現。架之前，我們先對1.允許網頁寬度自動調整
"自適應網頁設計”到底是做到的？其實並不難。 首先，在網頁代碼的頭部，加入一行viewport元標簽。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。 所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 2.不使用絕對寬度網頁寬度自動調整，對響應式框