CSS筆記-依視窗寬度自動隱藏

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

資訊列有三個元素,藍色部分為主要顯示內容,綠色區塊(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>
歡迎推文分享:
Published 24 February 2014 08:10 PM 由 Jeffrey
Filed under:
Views: 12,217



意見

# muki said on 26 February, 2014 11:39 PM

天啊,居然被大大引用我的文章 =口=

我是你的忠實觀眾啊 <(_ _)>

# Jeffrey said on 27 February, 2014 09:20 AM

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

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<February 2014>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
2324252627281
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication