您現在的位置是:電腦技術吧?>? 故障問題 ??>??響應式的,什么是響應式??>??正文詳情

響應式的,什么是響應式

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

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

注意,圖片要在各種設備上平滑過渡顯示,它們將會碰到的問題有:  適當的優化和減少圖片的體積  注意不要浪費帶寬(網站的成敗與否加載速度是其中主要因素之一)  設備使用相應的解決方案  對于第一個問題,使用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/fault/12299.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 電腦設置鎖屏密碼,電腦如何設置密碼鎖屏

    電腦設置鎖屏密碼,電腦如何設置密碼鎖屏 相關圖片電腦密碼怎么取消如何設置計算機密碼?很多時候,我們需要離開電腦,不想讓別人使用,但關閉電腦太麻煩了。我想鎖定密碼。今天,為了幫助大家,小編將與大家分享如何設置電腦...

  • 晶瑩剔透比喻人的,形容晶瑩剔透

    晶瑩剔透比喻人的,形容晶瑩剔透 相關圖片晶瑩剔透的水珠像什么最終效果展示晶瑩剔透的反義詞...

  • 電腦的輸入法不見了,電腦輸入法出不來

    電腦的輸入法不見了,電腦輸入法出不來 相關圖片電腦切換輸入法對于經常使用電腦的老兵來說,電腦輸入法的消失是一個很容易通過的彎道,但對于新手來說,這個彎道會出現“翻滾”現象。下面編輯將教新手如何解決電腦輸入法消...

  • 皮影動畫,皮影動畫制作

    皮影動畫,皮影動畫制作 相關圖片老動畫片大全80年代皮影在這個例子中,我們將使用flashcs4的新骨架工具來創建反向運動,它可以在短時間內產生復雜自然的動畫效果。這種方法非常適合陰影動畫這個例子的思想是導入...

  • skype網絡電話安卓,skype網絡電話手機版

    skype網絡電話安卓,skype網絡電話手機版 相關圖片網絡電話哪個軟件好用Skype是最流行的互聯網電話之一。無論你身在何處,你都可以輕松地與多個朋友分享精彩時刻。也許有些網友不知道Skype網絡電話的用法。拿著它skype打電話多少錢...

  • microsoftedge打不開,microsoft edge閃退

    microsoftedge打不開,microsoft edge閃退 相關圖片microsoft edge更新除了Microsoft edge占用的高內存外,還存在兼容性問題。比如打開百度在線磁盤時,發現經常出現頁面錯誤,無法順利進入主界面。那么如何解決微軟edge無法microsoft edge兼容...

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

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

  • 電腦怎么還原系統win7,安裝電腦系統教程

    電腦怎么還原系統win7,安裝電腦系統教程 相關圖片電腦如何換系統教程許多朋友想知道如何恢復計算機系統。實際上,恢復計算機系統的方法非常簡單。如果你想學習,編輯一定會教你如何恢復電腦系統!以下是如何恢復計算機系統圖...

  • 火柴棍怎么樣,火柴棍

    火柴棍怎么樣,火柴棍 相關圖片火柴棍戶外在雙光劍短兵相接的戰斗中,許多生產方法得到了改進,光劍加工中加入了濾光片。效果很好。我將在這里談談我的制作經驗光劍練習效果1。準備模板文件(模板。FLA)和...

  • 同步助手,qq同步助手app下載

    同步助手,qq同步助手app下載 相關圖片手機同步助手同步助手可以做什么?個性化鈴聲制作、垃圾清理、一鍵備份、圖標管理、白蘋果修復等,您可以使用同步助手來滿足以上要求,但有些人不知道如何使用同步助手的電腦...

熱評文章

  • Internetexplorer,internet怎么更新

    Internetexplorer,internet怎么更新 相關圖片internet設置為了匹配窗口的新Luna桌面計劃,Internet Explorer 6在其工具欄按鈕上添加了一些顏色。windows徽標的新顏色在白色背景上更清晰。使Inteinternet升級...

  • 單選按鈕組,單選按鈕組怎么設置

    單選按鈕組,單選按鈕組怎么設置 相關圖片vb單選按鈕組怎么設置一。插入單個單選按鈕1。單擊鼠標,將光標定位在表單框中,單擊“插入”菜單,選擇表單項,然后在彈出的子菜單中選擇單選按鈕命令,或在“插入”面板中選...

  • 電腦無法開機,電腦無法開機怎么辦

    電腦無法開機,電腦無法開機怎么辦 相關圖片電腦開機完全沒反應當我們遇到電腦無法開機時,有些人會認為是系統問題導致了這種情況。事實上,這不一定是系統問題,但也從硬件方面。因此,我們應該一個接一個地檢查,直到...

  • 電腦藍屏,電腦老是藍屏

    電腦藍屏,電腦老是藍屏 相關圖片電腦藍屏0x0000007b當你使用電腦時,電腦的藍屏突然讓人很不高興。電腦的藍屏呢?看著冰冷的藍屏,一動不動,無法形容心情。小編會告訴你電腦藍屏的解決方案。使用電腦的人突然遇...

  • cookie,flash

    cookie,flash 相關圖片刪除cookie工具/原材料flash cookie清洗工具:程序文檔請參考參考資料,個人網絡磁盤地址360安全衛士:它具有清洗功能手動刪除:專家使用,電腦專家不使用。但是,手刪除cookie的方法是...

  • microsoft edge主頁,microsoft edge

    microsoft edge主頁,microsoft edge 相關圖片microsoft edge兼容使用微軟edge瀏覽器后,發現它比以前的IE瀏覽器更容易使用。為了操作更方便,我們應該把我們需要的網站設置為主頁。如何設置Microsoft edge主頁?小編microsoftedge打不開...

  • 彈出,qq老是彈出信息怎么辦

    彈出,qq老是彈出信息怎么辦 相關圖片來信息不顯示在桌面怎么設置一。Dreamweaver CS5彈出消息行為1。選擇頁面元素或對象2。打開行為面板3。單擊“添加行為”( )按鈕,然后在彈出式下拉菜單中選擇彈出式信息命令。如信...

  • 安裝程序無法創建關鍵文件,安裝程序

    安裝程序無法創建關鍵文件,安裝程序 相關圖片安裝程序不能創建目錄錯誤82安裝了系統的人在安裝1程序的過程中遇到了很多問題,其中最典型的就是提示“安裝程序無法創建新的系統分區或無法識別它”。那我們該怎么辦?讓我們...

  • 微軟surface pro,微軟平板surface

    微軟surface pro,微軟平板surface 相關圖片微軟surface pro 5很多人來問我微軟平板電腦surface 3是否好。作為平板電腦領域微軟的一大殺手,微軟平板表面3作為一對一版本,不僅擁有PC操作系統,而且具有平板電腦的便利性和微軟...

  • 商品主圖設計,商品參數圖設計

    商品主圖設計,商品參數圖設計 相關圖片淘寶產品主圖設計一。獲得橫幅設計要求后,我們如何獲得橫幅設計要求?首先要了解以下幾個方面:1。橫幅設計用于哪些活動和目的?我們需要知道為什么和為了誰。例如,對于一個...

關注微信

变脸官网查询