【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

響應式設計的自動縮放配置-寫在媒體查詢(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 系列文章 》


沒有留言: