標籤：

這種所有圖片一直佔據100%寬度的響應式是如何做的？

01-21

Agera - HTML Template

這個網頁里，所有圖片寬度剛好佔100%，縮放瀏覽器窗口，圖片也是跟著縮放，到一定寬度了，一排只有4列，然後只有3列，到最後只有一列了。

這個是如何做的？

——————————分割線——————————————

2013年5月補充：已經做出來了，是用JavaScript寫的，還簡單的，不需要CSS的media queries，事實上，根本不需要任何CSS。

雖然沒用到，但還是特別感謝一下 @王瑞 你的答案

思路就是：檢測瀏覽器總寬度，每個圖片寬度=總寬度/一行的圖片數目，然後用JavaScript改下，還簡單的

首先，這個商業作品使用了響應式（Responsive）和流式（Fluid）的設計組合。其滿屏自適應的動態布局實現原理和技術重在 JS 而非 CSS，或者更確切肯定的說是他使用了 Isotope，一個可實現動態布局的 jQuery 插件：

Isotope

類似的插件項目還有：

jQuery Masonry

Wookmark jQuery Plugin

Freetile.js

其次，自適應圖像的 CSS 編寫方法。為 & 元素添加自定義屬性，以及以圖像文件地址為內容的屬性值。HTML：

&

媒體查詢（Media Queries）設備的屏幕尺寸並設置相應樣式，屬性選擇器配合設置 content 屬性值達到讓不同尺寸的圖像文件和媒體查詢相互呼應的目的。CSS：

@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}

@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}

Nicolas Gallagher：Responsive images using CSS3

最後，該問題中的鏈接是託管在 ThemeForest 上的精英作者（Elite Author） mpc 的作品。

Agera Responsive Fullscreen HTML / Facebook Theme

自適應模式? 如果僅僅是針對某一處(比如您說的圖片效果) 那麼我推薦你使用 jQuery Masonry 這個自適應jquery的插件 如果是全面的話 我推薦使用那個Media

&