欧美噜噜久久久xxx-欧美乱大交xxxxx潮喷-欧美乱大交xxxxx潮喷l头像-欧美乱大交xxxxx疯狂俱乐部-欧美乱妇高清无乱码-欧美乱妇高清无乱码免费

北京做網站公司分享響應式圖像解決方案

北京網站建設公司為您提供專業、高端的一站式服務

北京做網站公司分享響應式圖像解決方案


北京網站建設公司杰誠信達提供北京做網站、北京百度優化服務

  自從2010年Ethan Marcotte開始討論響應式網頁設計,開發者和設計師們競相尋求處理響應式圖片的方法。這的確是一個棘手的問題 ,因為我們對同一個網站在眾多設備寬度下,使用同一圖像源。你愿意在一個大顯示屏上顯示模糊地、馬賽克狀的圖像?你愿意在你的手機上加載一個巨大的(雖然更漂亮的)圖像?這個問題令北京做網站公司左右為難。

北京做網站公司

  一群來自響應式問題社區組(RICG)的聰明家伙致力于解決這個難題,他們使picture元素和srcset、sizes屬性納入HTML 5.1規范草案 。因為我們無法預測用戶在何地以及如何訪問我們的網站,所以北京做網站公司需要瀏覽器自身根據情況選擇最好的圖像。新規范將解決以下問題:
  基于設備象素比(device-pixel-radio)選擇
  基于viewport選擇
  基于Art direction(美術設計)選擇
  基于圖像格式選擇
  該規范中,img元素增加了兩個新屬性:srcset和sizes。srcset用來聲明一組圖像源,瀏覽器根據我們使用描述符指定的條件來選擇圖像。描述符x表示圖像的像素密度,描述符w表示圖像的寬度;瀏覽器使用這些信息從列表中選擇合適的圖像。sizes屬性為瀏覽器提供將要顯示圖像的尺寸信息,srcset使用w描述符時必須包含此屬性。這種方法尤其適用于可變寬度的圖像,我將在后面詳細討論。
  北京做網站公司現在可以根據用戶的viewport,提供不同質量或美術設計(art direction)的圖像,無需借助復雜的服務器端設置。響應式圖像將成為HTML規范的重要組成部分,所有瀏覽器終將都會支持此解決方案。
  固定寬度圖像:基于設備像素比選擇
  視網膜屏幕的廣泛應用,使我們不僅需要考慮屏幕分辨率,而且也需要考慮像素密度。視網膜屏幕,4K顯示器,UltraHD-它們都比相同尺寸的標準分辨率顯示器填充了更多的像素。更多的像素=更清晰的圖像。
  北京做網站公司有些圖片不管屏幕尺寸,始終以固定寬度顯示-如站點logo或人物簡介圖像,也就是說需要根據設備像素比來選擇。瀏覽器將根據設備像素比來選擇加載哪張圖像。
  srcset屬性列出了瀏覽器可以選擇加載的源圖像池,是一個由逗號分隔的列表。x描述符表示圖像的設備像素比。瀏覽器根據運行環境,利用這些信息來選擇適當的圖像。不理解srcset的瀏覽器會直接加載src屬性中聲明的圖像。


本文由北京網站建設公司杰誠信達(www.zmndesign.com.cn)提供技術支持


北京做網站公司推薦
杰誠信達
多一份選擇,總有收獲。

聯系我們建站,免費獲得專屬《做網站方案》及報價。

咨詢相關問題或預約面談,可以通過以下方式與我們聯系。

010-59814526