推 waldfantasy:感覺不需要分那麼多套css耶..設百分比讓它延展就好^^" 12/09 22:15
※ 編輯: superpai 來自: 124.12.196.46 (12/10 15:12)
最近終於有點時間，想把工作室的網站改版一下，趁機熟悉一下CSS的新東西。像是
CSS Media Queries。這東西可以讓你的網頁在不同的媒體型態下套用不同的CSS。
我用的方式是用一個base.css 來@import不同媒體用的CSS。
@import url(reset.css);
@import url(helper.css);
/*通用的CSS*/
@import url(style.css);
/*Desktop用的Layout*/
@import url("layout.css") only screen and (min-width:755px);
/*iPhone用的Layout*/
@import url("iphone.css") only screen and (max-width: 480px);
以上是style.css為底，desktop版面就用layout.css，但是視窗小於755的話就完全
不用任何layout的css，直到視窗480以下才套用iphone.css
這樣的好處是css檔各分開比較好整理，不過如果有效能的考量的話還是應該給後端
合併壓縮過比較好。
成果如下；
寬1024px以上
http://blog.minipai.idv.tw/wp-content/uploads/2010/12/stylecoder.1024.png
寬800px
http://blog.minipai.idv.tw/wp-content/uploads/2010/12/stylecoder.800.png
寬640px
http://blog.minipai.idv.tw/wp-content/uploads/2010/12/stylecoder.640.png
寬480px
http://blog.minipai.idv.tw/wp-content/uploads/2010/12/stylecoder.480.png
320px的layout跟480一樣，只是比較窄。
800跟1024其實是同一個layout css會有不同是因為彈性的css版面的緣故。
480以下開始套用iphone.css，所以選單整個變扁，也讓沒有必要顯示的當頁標題消失。
嘗試過後覺得是CSS Media Queries還蠻不錯用的，但是僅限於版面重新排列，如果是
要寫手機版的網頁的話恐怕還是另外寫一套UI比較恰當。因為我的網頁到iPhone上內容
已經拉太長了，如果能重新改寫成點選標題再進入分段內容，可能會更好一些。
另外圖片的檔案大小CSS也是幫不上忙的，還是要靠後端去判斷裝置來處理了。
以上是一點心得，請大家多多指教。
PS.
持續施工中的網頁：http://stylecoder.tw/ ，請用IE以外的最新瀏覽器開啟。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 124.12.196.46