CSS3: 不同螢幕,不同設計!
  類別:  影像繪圖
  書號:  ACU059300
  作者:  Zoe Mickley Gillenwater
 

  博客來  
  金石堂  
  天瓏  

雖然不能讓網站在每個裝置、每種螢幕大小和每種文字大小之下看起來都一模一樣,但是可以依據使用者的設定來進行調整,讓網站在可用的螢幕空間裡,無論外觀和功能為何,都能有良好的表現。使用CSS3 的媒體查詢(media queries)功能,來依據各種螢幕尺寸即時客製化一個網頁設計,讓你的網頁更動態、反應更靈敏,而且更好用。

改變小螢幕的版面
在小的檢視區域中,特色產品框非常狹窄地並排在一起。

目前每個特色產品框都是一個浮動到左側的div。移除浮動效果會讓它們一個個疊起來,填滿了主要內容div 的寬度。不過因為它們是疊起來的,所以每張配合的圖片放在方框頂端看起來不是那麼適當,如果將圖片放在方框左側會更合理。所以讓我們將這條新規則加到媒體查詢中:

這個規則會讓方框不再浮動,並移除它們的百分比寬度。它也移除了每個方框的上留白,並用左留白取代,為每張插圖(背景影像)提供了一些空間來放在方框的左側。

讓特色產品框疊起來,並將圖示放在左邊而不是上面,在狹窄視窗的有限空間裡看起來較美觀。

 

關於碁峰隱私權政策聯絡我們     檢視 : PC 版  手機版
碁峰資訊股份有限公司 GOTOP INFORMATION INC.
台北市南港區三重路66號7樓之6 / 7F.-6,No.66,Sanchong Rd.,Nangang District,Taipei
TEL:(02)2788-2408 FAX:(02)8192-4433 劃撥帳號:14244383
Copyright 2014© GOTOP Information Inc, All Rights Reserved 請勿任意連結、轉載