iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
1
Modern Web

~網頁入門~系列 第 21

Day21-HTML(17) –響應式網頁設計(RWD) (下)

  • 分享至 

  • xImage
  •  

響應式圖像

使用width屬性

把 width 屬性設置為100%的話,圖像將響應頁面大小自動做放大和縮小,不管圖像的原始大小,使寬度始終占滿整個頁面。
<img src="URL" style="width:100%;">

試試效果,試著插入自己找的圖片的URL吧!

使用最大寬度屬性

把 max-width 屬性設置為100%,圖像也會響應頁面大小自動做放大和縮小,但絕不會放大到大於其原始大小
<img src="URL" style="max-width:100%;">

試試效果,試著插入自己找的圖片的URL吧!

根據瀏覽器寬度顯示不同的圖像

HTML <picture> 標籤可以讓不同的瀏覽器窗口大小定義不同的圖像。

<picture> 標籤內包含兩種標籤:一個或多個 <source>標籤 和 一個<img>標籤。

<source>標籤可以指定視頻/音頻/圖像文件,裡面可以放srcset(必填)、mediatype等元素,詳細說明可參考最下方參考資料網址。
(建議使用網頁版來看程式碼 手機版會跑版難以閱讀)

<picture>
  <source srcset="URL" media="(max-width: 600px)"> <!-- 頁面寬 < 600px時 -->
  <source srcset="URL" media="(max-width: 1200px)"> <!-- 頁面寬 < 1200px時 -->
  <source srcset="URL"> <!-- 其他頁面寬 (頁面寬 > 1200px)時 -->
  <img src="URL" alt=""> <!-- 若沒有上面那一行 其他頁面寬 (頁面寬 > 1200px)時 則使用img的圖像 -->
</picture>

在上方程式碼中,srcset內放入想要替換的圖片位址media則是指定何時要使用那張圖片,當達到替換條件時,<source> 內的 URL 就會把 <img> 的圖片位址換掉。

試試效果,試著插入自己找的圖片的URL吧!

響應文字大小

將文本標籤加入用 “vw” 單位設置的 style 屬性

1vw =視口寬度的1%。如果視口為50厘米寬,則1vw為0.5厘米

style="font-size:10vw;"

試試效果

Media Queries

(建議使用網頁版來看程式碼 手機版會跑版難以閱讀)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sherry's WEB</title>
    <style> 
        .left {
            background-color: lightskyblue;
            padding:20px;
            float:left;
            box-sizing:border-box;
            width:20%;
        }
            
        .main {
            background-color: lightgray;
            padding:20px;
            float:left;
            box-sizing:border-box;
            width:60%;
        }
            
        .right {
            background-color: lightgreen;
            padding:20px;
            float:left;
            box-sizing:border-box;
            width:20%;
        }
            
     		/* 透過media指定  當頁面 < 800px
                Left Menu / Main Content / Right Content各自占了100%的寬度 */
        @media screen and (max-width:800px) {
            .left, .main, .right {
                width:100%;
            }
        }
    </style>
</head>
<body>        
    <div class="left">
        <p>Left Menu</p>
    </div>
       
    <div class="main">
        <p>Main Content</p>
    </div>
            
    <div class="right">
        <p>Right Content</p>
    </div>
</body>

小解說:

  1. 在 CSS 中使用 @media 規則指定目標 media (這裡的 media type 是 screen,主要用於彩色電腦螢幕 (包含手機和平版))
  2. div 加上 float 屬性如果比例配置 < 100% 就可以並排、不會跳行。範例中 Left Menu / Main Content / Right Content 分別占了 20%、60%、20%,總和100%,所以可以占滿一整行

頁面 > 800px
https://ithelp.ithome.com.tw/upload/images/20191007/20120959l4LhZNT7LX.jpg
頁面 < 800px
https://ithelp.ithome.com.tw/upload/images/20191007/20120959YeD6411QmD.jpg

試試效果

參考資料:
https://www.w3schools.com/tags/tag_picture.asp
https://www.w3schools.com/tags/tag_source.asp


上一篇
Day20-HTML(16) – 響應式網頁設計(RWD) (上)
下一篇
Day22-HTML(18) – 製作表單畫面
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言