生活稿什麼
  • 中華職棒
    • 中華職棒官方
    • 樂天桃猿
    • 中信兄弟
    • 富邦悍將
    • 統一獅
    • 味全龍
  • 網路電視
    • 棒球baseball
    • 籃球basketball
    • 賽車Racing
    • 網球tennis
    • 足球football
    • 電子競技Gaming
  • 吃喝玩樂
    • 美食
    • 開箱評測
    • 棒球
    • 運動健身
  • 電腦手機軟體
    • 免費軟體
      • Google Chrome
    • 社群軟體
      • LINE
      • Facebook
      • Instagram
    • WordPress
    • 電腦維修
    • 程式語言
  • 動漫電玩
    • 模型玩具
    • 手機遊戲
    • 日本動漫
No Result
View All Result
生活稿什麼
No Result
View All Result

Html5響應式在不同裝置載入不同解析度圖片

Html5響應式在不同裝置載入不同解析度圖片

Html5響應式在不同裝置載入不同解析度圖片

在以前的網頁製作上需要針對不同的裝置來搭配製作不同解析度的網頁,但現在有了響應式RWD來設計網頁只需要製作一份網頁,即可以將網站以符合各種裝置的解析度來呈現方便性相對的提高,已無需再進行製作各種解析度的網頁,但如果是原本符合電腦版的橫向的圖片,想要轉換到手機上時使用直式的圖片,這邊該如何去實現呢?在HTML5中有新的<Picture>標籤可以來使用,可以藉由判斷解析度的裝置來進行載入不同的圖片又可以節省載入時間,以下就跟著小編來看看如何讓 Html5響應式在不同裝置載入不同解析度圖片

Html5響應式在不同裝置載入不同解析度圖片

  <picture>標籤的使用規則:

  1. 描述的順序:當瀏覽器讀取到符合條件的描述時、就會直接忽略之後的描述。
  2. 在<picture>結束前放上一個標準的<img>:為了避免舊版瀏覽器無法使用<picture>也能正常的顯示圖片。
  3. 可支援<picture>的瀏覽器:Firefox 38, Chrome 38,Opera 27。

  <picture> 使用範例:

<!-- 分手機版與電腦版的圖面 設定值1000PX以上 -->
<picture>
<!------- 區分裝置設定圖片(手機或電腦) ------->
<!-- 手機裝置 -->
<source srcset="assets/styleguide/Straight_banner.jpg" media="(max-width: 1000px)">
<!-- 電腦裝置 -->
<source srcset="assets/styleguide/Titlebanner.png" media="(min-width: 1001px)">
<!-- Default設定值 -->
<img class="img-fluid d-block mt-5" width="100%" src="assets/styleguide/Titlebanner.png">
</picture>

 

  Picturefill.js 使用範例如下:

如果要讓舊版瀏覽器也能支援<picture>,這邊可以使用Picturefill.js,直接在網頁中加入picturefill.js即可使用。

<script src="picturefill.js"></script>

 

  <picture> IE9解決方案 :

另外因為IE9無法判別在<picture>裡的 <source>標籤,所以必須要在多加一層<video>標籤,IE9才有辦法讀取到<source>的資訊。

<picture>
<!-- 區分裝置設定圖片(手機或電腦) -->
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/styleguide/Straight_banner.jpg" media="(max-width: 1000px)">
<source srcset="assets/styleguide/Titlebanner.png" media="(min-width: 1001px)">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<!-- Default設定值 -->
<img class="img-fluid d-block mt-5" width="100%" src="assets/styleguide/Titlebanner.png">
</picture>

 

延伸閱讀:

♦如何在GoDaddy購買網址與註冊網域

♦HTML Image Map在一張圖片上建立多個超連結

♦使用Google adsense自動廣告來幫您賺大錢

♦Google雲端變HTML網頁空間

♦GIF製作 – GICKR線上將多張圖片製作成GIF動畫

Tags: HTML5Html5響應式HTML圖片HTML載入圖片Image OptimizationLoading PerformanceMedia Querypicturefill.jsPicture標籤Responsive ImagesResponsive Web Design圖片最佳化網頁圖片網頁在不同裝置載入不同圖片網頁手機版響應式RWD響應式圖片響應式網頁
小馬

小馬

在體育圈工作,喜歡旅遊、吃美食、分享生活。除此之外,也略懂程式設計與SEO,介於行銷人與工程師之間,目標是希望能夠整合這兩個不同的領域,分享更多有價值的資訊給更多人! 聯繫請洽:[email protected]

  • 中華職棒
    • 中華職棒官方
    • 樂天桃猿
    • 中信兄弟
    • 富邦悍將
    • 統一獅
    • 味全龍
  • 網路電視
    • 棒球baseball
    • 籃球basketball
    • 賽車Racing
    • 網球tennis
    • 足球football
    • 電子競技Gaming
  • 吃喝玩樂
    • 美食
    • 開箱評測
    • 棒球
    • 運動健身
  • 電腦手機軟體
    • 免費軟體
      • Google Chrome
    • 社群軟體
      • LINE
      • Facebook
      • Instagram
    • WordPress
    • 電腦維修
    • 程式語言
  • 動漫電玩
    • 模型玩具
    • 手機遊戲
    • 日本動漫

© 2021 生活稿什麼