雖然不能讓網站在每個裝置、每種螢幕大小和每種文字大小之下看起來都一模一樣，但是可以依據使用者的設定來進行調整，讓網站在可用的螢幕空間裡，無論外觀和功能為何，都能有良好的表現。使用CSS3 的媒體查詢（media queries）功能，來依據各種螢幕尺寸即時客製化一個網頁設計，讓你的網頁更動態、反應更靈敏，而且更好用。

改變小螢幕的版面
在小的檢視區域中，特色產品框非常狹窄地並排在一起。

目前每個特色產品框都是一個浮動到左側的div。移除浮動效果會讓它們一個個疊起來，填滿了主要內容div 的寬度。不過因為它們是疊起來的，所以每張配合的圖片放在方框頂端看起來不是那麼適當，如果將圖片放在方框左側會更合理。所以讓我們將這條新規則加到媒體查詢中：

這個規則會讓方框不再浮動，並移除它們的百分比寬度。它也移除了每個方框的上留白，並用左留白取代，為每張插圖（背景影像）提供了一些空間來放在方框的左側。

讓特色產品框疊起來，並將圖示放在左邊而不是上面，在狹窄視窗的有限空間裡看起來較美觀。