響應式設計的自動縮放配置-寫在媒體查詢(Media Query)之前

RWD 系列文章 》

如前一篇「單一圖片響應式配置」所討論的,單一圖片在不同裝置的呈現相當容易處理,然而在一般的情形下,網頁內容不僅僅只是一張大圖的呈現,既使目前流行的大圖風格網頁,還是有其它的區塊需要處理,如此一來要讓網頁的內容能夠在任何尺寸下都能適當的呈現,情況就變得有些複雜了。

以一個簡單的案例作示範,例如我希望在網頁上呈現多張圖片,並且分別配置導覽圖示,完成結果如下,點選畫面下方的任何一張小圖,畫面的上方,便會切換至完整的大圖呈現。



首先準備三張大圖(1680✕600)與三張小圖(420✕157),小圖是大圖的部份內容,於網頁配置內容如下:

<div id="lpic">
        <img id="viewimg" src="img/1-abcxyz.jpg" />
    </div>
    <div  id="spic">
       <div><figure>
<img data-src="1-abcxyz" src="5-1-abcxyz.jpg" />
<figcaption><span>藍天白雲</span></figcaption></figure></div>
       <div><figure>
<img data-src="2-abcxyz" src="5-2-abcxyz.jpg" />
<figcaption><span>十六石山</span></figcaption></figure></div>
       <div><figure>
<img  data-src="3-abcxyz" src="5-3-abcxyz.jpg" />
<figcaption><span>遠眺十六石山</span></figcaption></figure></div>
</div>

未設定任何樣式之前,所有的圖片預設以全尺寸呈現如下:



為了讓所有的圖片都能根據螢幕尺寸適當的縮放大小,因此將img樣式設定如下:

img
{          
height: auto
max-width: 100%;      
}

現在畫面上的圖片會根據螢幕的寬度自動縮放至合適的尺寸,以下是分別將畫面縮小至不同寬度的效果:

      

接下來將小圖橫向配置,指定樣式如下:

#spic > div
{
float:left;
}

如此一來其中的圖片即會以橫向排列如下:



這個結果畫面並非我們想要的,由於圖片會在可能的螢幕空間裏呈現最大的寬度,因此當空間不足以容納一張完整圖片的最大寬度時,其它圖片就會被往下擠,造成上述的結果。因此我們要進一步限縮每一張圖片容器 div 標籤所能佔據的寬度為 30% 並且將其置中如下:

#spic > div
{
float:left
width:30%;
    text-align:center;                      
}

現在無論螢幕尺寸大小,都可以得到一致的排列,

     

現在已經可以讓畫面上的區塊依螢幕大小正確呈現了,不過真正的問題在於,若是以手機等小螢幕裝置瀏覽時,這樣的排列並不合適,當螢幕縮小至一定的寬度(例如 420px 以下),我們希望整個畫面能夠以單欄格式呈現,也就是其中的縮圖能自動調整為垂直排列,如稍早的圖示,要完成此類的動態配置效果,就必須藉助媒體查詢(Media Query)進行處理了。



RWD 系列文章 》


沒有留言: