W3.CSS – 響應式設計

上一頁
下一頁

W3.CSS 有若干個特殊類來建立響應式設計。

序號 類名及說明
1

w3-half

將容器設定為佔用中或大型螢幕裝置視窗的 1/2 nd。如果螢幕小於 601 畫素，它會將容器大小調整為 100%。
2

w3-third

將容器設定為佔用中或大型螢幕裝置視窗的 1/3 rd。如果螢幕小於 601 畫素，它會將容器大小調整為 100%。
3

w3-quarter

將容器設定為佔用中或大型螢幕裝置視窗的 1/4 th。如果螢幕小於 601 畫素，它會將容器大小調整為 100%。
4

w3-col

指定 12 列網格中的一列。
5

w3-row

指定用於響應式類的無填充容器。該類對於完全響應的響應式類是強制性的。

示例

w3css_responsive_design.htm

現場演示 
<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告