好吧真的要剁手了。（欸）明明決定要把 OUaT 第十七日晚上先寫完再來動這個，結果根本沒寫幾段就跑來改了。
主要還是這個功能的使用比我原本想像還要簡單的緣故。
這個網站原本是使用 JavaScript 在初次載入頁面的時候判斷螢幕寬度，並且決定使用哪一組欄位的 CSS。雖然也允許使用者手動切換（然後以 cookie 記憶），不過畢竟是跟著螢幕寬度而非真正的視窗寬度變動。手動切換的功能也還需要使用者自己花時間在頁面上尋找正確按鈕。
這次換成 media queries 的方式來指定排版，好處是不需要那麼多組 CSS，可以把不同寬度（甚至高度，不過這個暫時我還沒寫進去）下的設定寫在同一份 CSS 裡，更好的是當視窗大小改變時（也就是在非「放到最大」模式下開網頁時），欄位也可以隨視窗大小即時變化。（可惜 google adsense 廣告的尺寸是 google 家固定好的，這部份彈性就小些。）
我還是保留了 cookie 和手動選取的部份，不過是用來調黑白色系和字體大小，寬度相對應的變化我就讓 CSS 自己判定了。
使用方式非常簡單，可以直接參考這篇。@media 除了用來指定不同寬度下的表現之外，也可以用來製作列印時的佈景，比如說螢幕上看是黑底白字，但列印時可以印成白底黑字，並且隱藏不必要的側欄內容。方法是把列印時的排版指定於 @media print {} 裡面。
既然我的網頁原本已經有三種寬度的 CSS 版面，移植時也只需要把相對應的 CSS 複製過來，然後把本來 html 裡面宣告的 alternate stylesheet 拔掉即可。反而把原本的不同寬度切換按鈕拔掉花得時間還更多些哩。
之後也許會偶爾抽空研究一下螢幕高度或超寬螢幕（比如嚇死人的寬度 1920 或 2560）的變化，還有各種小小手機螢幕是否有做更細節調整的需要囉。