您現在的位置是:電腦技術吧?>? 基礎知識 ??>??響應式的,什么是響應式??>??正文詳情

響應式的,什么是響應式

初俊拔2019-12-02 12:42:19 人圍觀
簡介網頁響應式在整個網站的發展過程中,圖片的管理難度很大。請注意,圖片應在各種設備上平滑顯示。他們會遇到的問題是:適當優化和縮小圖片尺寸,注意不要浪費帶寬(網站加載速

介紹  在整個網站的開發中,在管理圖片上較為困難。

注意,圖片要在各種設備上平滑過渡顯示,它們將會碰到的問題有:  適當的優化和減少圖片的體積  注意不要浪費帶寬(網站的成敗與否加載速度是其中主要因素之一)  設備使用相應的解決方案  對于第一個問題,使用TinyPng和JPEGmini工具可以幫助減少圖片的體積和優化圖片。

  對于第二個問題,在一些場合下我們可能要使用到強大的媒體查詢。

多虧了有他們,我們可以很簡單的處理背景圖片的問題。

但是,有些地方使用的是img來顯示圖片,這也是我們要解決的第三個問題,也是最后一個問題,如何根據設備的分辨率調用合適的圖像。

  在這種情況之下,有個兩個解決方案:使用元素和

元素的srcset屬性。

  在這篇文章中,我會向大家總體的介紹srcset屬性。

  srcset屬性  使用這個屬性主要有什么好處呢?好處就是Web開發人員可以給使用高分辨率的用戶顯示高分辨的圖像源,給其他設備分辨率的用戶使用其他的圖像源。

在第一種情況下使用低PDD(pixel density displays)不需要背負著下載無用的高分辨率圖像,而擔心浪費帶寬;而后者可以享受高清設備帶來的不一樣的享受。

在第二種情況中,我們可以根據不同的屏幕尺寸指定不同的圖像,這主要是根據用戶的設備來提供一個較好的圖像源。

  事實上,srcset屬性就做了這樣的事情,根據像素密度或用戶使用的屏幕尺寸大小,指定一個圖像源。

所以說,srcset屬性可以讓瀏覽器提供一套建議,讓瀏覽器根據正確的行為匹配正確的圖像。

通過這樣做,我們提高了Web的質量,同時提高了Web頁面的加載速度和給用戶一個較好的體驗。

  在這一點上,這個屬性的基本特征就是:根據指定的條件來做選擇,使其工作。

這對于我們編碼工作和實現的方法變理更為簡易。

  W3C規范是這樣描述srcset:srcset屬性允許作者根據不同分辨率或不同的視窗尺寸提多個不同分辨圖像。

用戶代理會根據之前獲取的任何資源做選擇,從而避免多個資源加載浪費帶寬和相關性能問題。

  說起圖片的srcset屬性,估計有不少與時俱進的小伙伴會在心中不由自主念想道:這個我知道的,可以根據屏幕密度現實對應尺寸圖片,例如  

  上面代碼對應demo輕戳這里。

當然,我們也可以簡寫成:  

  由于我們都不是別人家的公司,因此,我們的辦公PC顯示器默認設備像素比都是1,因此,這些顯示器呈現的圖片默認都是128像素寬度的。

下面問題來了,(不是挖掘機哪家強),如何讓?絲顯示器模擬高設備像素比呢?  方法一:  Chrome瀏覽器,切換設備模式,如下截圖:

  然后,選擇對應的設備,例如iPhone6 Plus的設備像素比就是3.

  此時,刷新頁面,加載的就是大尺寸圖片,也就是256像素寬度那張。

  方法二:

  此時設備像素比window.devicePixelRatio為1.5,因此加載的就是256像素寬度的圖片。

有圖有真相:

  不同的2x顯示策略  還有些時候,使用同尺寸的高清圖片作為2x對應圖片,雖然兩者圖片大小差不多,但個人覺得還是2倍尺寸優化大圖更好一點,為什么呢?  srcset當初設計的用意是為了高密度屏幕上圖片更好的顯示,如果世界上就只有不同設備密度這一個戲劇沖突的話,2x圖片是高清圖還是2倍尺寸圖其實都無傷大雅。

然而,事實上,生活無處不戲劇,現代web布局中,有種布局不可忽略,那就是「響應式布局」,劇本往往會這樣,PC瀏覽器上顯示大圖,Mobile瀏覽器上顯示小圖。

發現沒,同樣是大小圖的要求,和設備像素比有類似的戲劇沖突。

  于是,如果我們2x圖片使用的是高清圖,結合響應式布局,我們可能需要4張圖片資源,即:小圖、小圖高清和大圖、大圖高清。

但是,2x圖片走的是2倍尺寸圖片,我們只需要3張圖片資源,即:小圖、中圖以及中圖、大圖。

  在老一代srcset規范成型過程中,其實已經考慮到與響應式布局的糾葛,出現了w描述符,例如,走高清路線的: CSS Code復制內容到剪貼板

  1. img src=small.jpg srcset=small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x
  走2倍尺寸路線的: CSS Code復制內容到剪貼板
  1. img src=small.jpg srcset=small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x
  注意啊注意:千萬不要去關心上面的w描述符的含義,因為新的srcset屬性中w描述符含義與之完全不同,為了避免理解沖突,心中跟我默念3遍:忘掉它、忘掉它、忘掉它,無視它、無視它、無視它。

大家可以把精力放在下面,新的srcset規范以及新的sizes屬性語法含義等。

版權聲明:本文由 初俊拔 整理編輯。

原標題:可響應式框架,什么是響應式框架

轉載注明出處:http://www.dn9ww09s.icu/basics/14988.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • Java編程,g代碼編程詳解

    Java編程,g代碼編程詳解 相關圖片宏程序編程一百例隨著CSS的發展,CSS具有語義命名約定和CSS層的分離,這將有助于CSS的可擴展性、性能改進和代碼管理。在我之前的文章中討論過的許多CSS問題可以通過使用適當編程初...

  • 百分比是單位嗎,百分比怎么算

    百分比是單位嗎,百分比怎么算 相關圖片計算百分比視區單位視區單位是相對單位,這意味著它們沒有客觀尺寸。它們的大小由視區的大小決定。這里有四個與視區相關的單位。我會把重點放在前兩個單元上,因為它們更有可...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

  • text—decoration,decorative text

    text—decoration,decorative text 相關圖片text怎么用定義并使用文本裝飾屬性指定添加到文本的裝飾。注意:飾面的顏色由“顏色”屬性設置。說明此屬性允許您對文本設置一些效果,例如下劃線。如果子元素沒有自己的裝飾,...

  • fontsize屬性,font和fontsize

    fontsize屬性,font和fontsize 相關圖片css font size基本語法結構:字體大小 字體大小值 單位字:字體大小語法:字體大小:絕對大小|相對大小|長度值:x x small | x smallfontsize單位html5...

  • scale的用法,range和scale用法區別

    scale的用法,range和scale用法區別 相關圖片scale的音標縮放屬性語法:Zoom:normal | |;默認值:normal應用于:所有元素的繼承:with value:normal:使用對象的實際大小。:使用浮點數定grant的用法...

  • magisk模塊編寫,python模塊有哪些

    magisk模塊編寫,python模塊有哪些 相關圖片python模塊大全印刷媒體(如雜志或報紙)在網站上的最大優勢是頁面和段落布局的靈活性。例如,打印媒體能夠優雅地填充多個列,甚至如下面的屏幕截圖所示的那樣復雜。然而,由于...

  • border radius屬性,border-radius

    border radius屬性,border-radius 相關圖片textdecoration屬性邊界半徑是一種縮寫方法。如果前/后和/或后存在值,則設置/設置其水平半徑,并設置/設置其垂直半徑后的值。如果沒有/,則水平和垂直半徑相等。CSS代碼將內容復制到...

  • 屬性的使用無效,如何使用被隱藏的屬性

    屬性的使用無效,如何使用被隱藏的屬性 相關圖片三代五屬性頁面上顯示的每個元素(包括內聯元素)都可以視為一個框模型。查看chrome devtools中的屏幕截圖:可以看到box模型由四個部分組成。從內到外:內容填充全能屬性如何使用...

  • animation屬性,animation的屬性及其意思

    animation屬性,animation的屬性及其意思 相關圖片animation元素一、animation的語法   1、@keyframes插入關鍵幀  (1)FormTo形式:  CSS Code復制內容到剪貼板  @keyframes danimation教程...

熱評文章

  • qt安裝教程及配置,plsql安裝教程及配置

    qt安裝教程及配置,plsql安裝教程及配置 相關圖片tomcat9的安裝與配置Cobbler是一種快速網絡安裝的Linux服務,經過調整還可以支持windows的網絡安裝。這個工具是用Python開發的,它小巧輕便(只有15K行Pythotomcat的安裝與配置...

  • 全方位了解,全方位

    全方位了解,全方位 相關圖片如何全方位了解公司這是一個adobe建議:CSS區域,它提供了一種在多個不同元素中排列內容的方法。首先,需要為內容容器的flow屬性聲明一個唯一的字符值,然后使用from()函數全方面...

  • 三角箭頭,三角箭頭圖標

    三角箭頭,三角箭頭圖標 相關圖片三箭頭使用CSS制作不帶圖片和箭頭的div box(此代碼更適合追求純代碼的人)這種效果也可以用圖片背景實現,代碼將更加簡潔CSS代碼:CSS代碼將內容復制到剪貼板d箭頭...

  • 案例精選,成功策劃案例精選

    案例精選,成功策劃案例精選 相關圖片商業策劃案例精選這項審查于7月初完成。一方面,我的“廣告愛看!“騰訊十大最佳HTML5廣告”出人意料地在業內大受歡迎。另一方面,有傳聞稱,公眾評論HTML5的代理公司不再制作H保...

  • 中外廣告差別,什么是好廣告

    中外廣告差別,什么是好廣告 相關圖片哪個國家的廣告好在網絡傳播領域,我一直在探索與用戶更好的溝通和信息傳遞!在解釋H5廣告與傳統廣告的區別時,筆者試圖用一幅圖片來概括一種內容,讓看護者更簡單地理解其內涵...

  • 小王子粘土,輕粘土小王子教程

    小王子粘土,輕粘土小王子教程 相關圖片超輕粘土小王子教程視頻你好,我是Erwa,騰訊tgidas的動畫師。我很榮幸能參加與小王子電影聯合推出的游戲版《小王子的愛情消除》的H5世界觀推廣活動。同時,我們還制作了另一個版...

  • 什么是數據庫索引,數據庫索引怎么用

    什么是數據庫索引,數據庫索引怎么用 相關圖片SQL數據庫介紹了indexeddb是一個HTML5 web數據庫,它允許html5web應用程序在用戶瀏覽器中存儲數據。Indexeddb非常強大,對應用程序非常有用。它數據庫...

  • 吳亦凡,吳亦凡個人資料

    吳亦凡,吳亦凡個人資料 相關圖片吳亦凡在追娜扎創意總是一個命題作文。在項目的早期階段,團隊了解到:1。吳一凡簽署的全國攻勢將是一場立體完整的戰役,品牌團隊希望tgidas能通過在H5模塊中的精彩創意引爆話題...

  • 七夕秀恩愛,七夕怎么樣秀恩愛

    七夕秀恩愛,七夕怎么樣秀恩愛 相關圖片情人節秀恩愛的說說七夕節的愛情也取決于時間。不能早也不能晚。因為愛的表露遲早會有報應的,所以我們選擇了周五中午,這也可以讓牛郎和織女的鵲橋更加堅固耐用。接下來,讓...

  • 平面設計怎么提升自己,平面設計提升方法

    平面設計怎么提升自己,平面設計提升方法 相關圖片平面設計提升培訓機構現在H5廣告非常流行,平面設計師必須想辦法提高自己。今天,我想總結一些平面設計自我完善的經驗。設計行業變化很快。它可以分為三個部分:內容、表演技巧...

關注微信

变脸官网查询