CSS響應性設計:不需要調整HTML隨意布局網頁

文章簡介：CSS在響應性設計的未來與改進。

映像在響應性設計裡的重要性:

響應性設計裡映像是一個關鍵點，不同裝置映像有不同顯示規格，大多數的設計師喜歡像素完美化，正常大小的圖片在高密度的裝置裡顯示就是一坨屎，圖片大了下載速度也會增加，一些國家流量是非常昂貴的。還有，為什麼我小螢幕裝置要去下載一張大尺寸的圖片呢？讓我們一起看下解決這些問題的方法。

元素，HTML5的新標籤，使用它可以讓一些媒體查詢到適應的裝置來滿足不同映像,參考一下代碼:

 <picture width="750"  height="750">     
  <source  media="(min-width: 45em)" src=http://www.webjx.com/css/"large.jpg">
  <source  media="(min-width: 18em)" src=http://www.webjx.com/css/"med.jpg">
  <source  src=http://www.webjx.com/css/"small.jpg">
  <img  src=http://www.webjx.com/css/"small.jpg" alt="">
  <p>Accessible  text</p>
</picture>

根據不同裝置尺寸選擇不同圖片，預設是small.jpg。該方案正由w3c專業人員進行討論中，目前只有少數瀏覽器支援。關於映像尺寸的響應性設計處理的第二個方案由蘋果公司提出，叫做”srcset”屬性，這項功能基於HTML的標籤而引申而出的，具體可以參考下面代碼:

 <img  alt="The Breakfast Combo"
  src=http://www.webjx.com/css/"banner.jpg"
  srcset="banner-HD.jpg  2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x">

從上面代碼看到，標籤裡的值由逗號來分割字串，不同裝置尺寸對應不同路徑的像素圖片。

瀏覽器不支援srcset屬性，選擇預設圖片是banner.jpg
像素比率2倍的採用banner-HD.jpg
像素比率100w的採用banner-phone.jpg
同時滿足以上兩種情況的選擇banner-phone-HD.jpg
由於技術上複雜性與目前存在的缺陷，該判斷方法目前不支援任何瀏覽器,背景映像的選擇與上面方法一樣,不過目前可以在Safari 6+ & Chrome 21+環境下測試。

background-image: image-set(  "foo.png" 1x,"foo-2x.png" 2x,"foo-print.png" 600dpi );

不需要調整HTML就可以隨意布局?

是的，目前最流行的解決方案就是使用CSS3 flexible box layout model(“flexbox”),並支援大多數主流瀏覽器,該模板可另你輕鬆地重新排列螢幕上的元素,詳情介紹可以參考CSS3 Flexible Box Layout Explained,下面是簡單的CSS樣式參考:

 .parent {
  display: flex;
  flex-flow: column; /* 顯示列表裡的項目 */
}
.children {
  order: 1; /* 更改元素的順序 */
}

另外一種方法與上面的相似，但需要使用到javascript我這邊就不介紹了。下面介紹最後一種CSS的布局方法，在未來可能會實現，也是本人最喜歡的一種解決方案。使用CSS3樣式布局，模組的工作原理是關聯元素與布局的”名稱”排版,HTML排版根據CSS裡的元素位置順序而變動，具體看下面代碼:

 .parent {
   display: "ab"
            "cd" /* 建立CSS裡的布局介面 */
}
.child1 {
   position: a;
}
.child2 {
   position: b;
}
.child3 {
   position: c;
}
.child4 {
   position: d;
}

然後是HTML呈現的形態:

以上這個解決方案是我個人最喜歡的，直觀、簡潔，初學者也能看懂，只可惜目前只是處於設想階段，沒有任何一個開發商去實現它，我們只好期待遙遠的未來。在這篇文章裡我只是簡單提及一下CSS在響應性設計的未來，一些技術的解決方案，在未來我們會看到的。