專案需求,需實現以下效果:

資訊列有三個元素,藍色部分為主要顯示內容,綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足,綠色及紅色區塊需自動隱藏,避免遮蔽藍色區塊的文字。

JavaScript熟手會優先想到攔截window.onresize事件,再依視窗寬度決定Block1或Block2是否隱藏,其實CSS也有武器應付這類情境,不用寫半行程式,靠瀏覽器內建功能就搞定。

過去介紹過的CSS @media,其支援max-width、min-width條件參數,讓某段CSS宣告只在特定視窗寬度生效。此一彈性讓設計師得以針對不同螢幕解析度加上額外設定,讓同一網頁的排版依視窗尺寸自動調整,維持可讀性,而這也是RWD(Responsive Web Design)很常用的技巧。(延伸閱讀: CSS Media Queries 介紹與基礎應用, Media Query 小撇步)

@media用在這個案例只是牛刀小試。將Block 1, Block 2先設為display:none,利用@media (max-width: …px)加入兩個區塊,限定視窗寬度大於等於465px時Block 2 display: block,大於等於560px時Block 1 display: block。如此,寬度大於等於560會顯示Block 1 & 2,介於560到465則只顯示Block 2,小於465時兩個Block都會被隱藏。

程式範例如下: [線上展示]

排版顯示純文字
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>利用CSS在寬度不足時自動隱藏右側元素</title>
  <style>
    body { font-size: 9pt; }
    .main {
      position: absolute; top: 0px; left: 0px; right: 0px;
      height: 20px; background-color: blue; color: white; padding: 6px;
    }
    .block { 
      position: absolute; border: 1px solid gray; top: 0px; 
      height: 18px; color: yellow; padding: 6px;
      text-align: center;
    }
    .b1 { 
      display: none;
      background-color: green;
      right: 150px;
      width: 100px;
    }
    .b2 { 
      display: none;
      background-color: brown;
      right: 0px;
      width: 150px;
    }
    @media only screen and (min-width:465px) {
      .b2 { display: block; }
    }
    @media only screen and (min-width:560px) {
      .b1 { display: block; }
    }
  </style>
</head>
<body>
  <div class='main'>
    我達達的馬蹄,是美麗的錯誤,我不是歸人,是個過客 </div>
  <div class='b1 block'>Block 1</div>
  <div class='b2 block'>Block 2</div>
</body>
</html>

Comments

# by muki

天啊,居然被大大引用我的文章 =口= 我是你的忠實觀眾啊 <(_ _)>

# by Jeffrey

to muki, 我還在就讀CSS幼幼班,其實我是妳的粉絲~

Post a comment