成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

老生常談之響應式開發(fā)

wangzy2019 / 1608人閱讀

摘要：什么是響應式設計作為一名合格的前端開發(fā)攻城獅工程師，做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢這個時候響應式開發(fā)就應運而生了。五標簽的屬性除了響應式圖像，標簽還可以用來選擇不同格式的圖像。

什么是響應式設計？

作為一名合格的前端開發(fā)攻城獅（工程師），做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢？這個時候響應式開發(fā)就應運而生了。什么是響應式設計？什么又是響應式圖像呢？
我們來了解什么是響應式設計：網(wǎng)頁在不同的設備上，都可以達到讓使用者感覺比較舒適的合理的視覺體驗，叫做“響應式設計”（responsive web design）。
由響應式設計的網(wǎng)頁圖像，就叫做響應式圖像

響應式的解決方案有很多，JavaScript 和css都可以實現(xiàn)，這里我們了解一種最簡單的，語義最好的HTML的解決方案，而且瀏覽器都原生支持的。

一、由img標簽引起的問題

這一行代碼在移動端和PC端，插入的都是圖片screen.png文件
這種方式雖然簡單高效，可以多端并行，但是有很多的弊端：
1、體積比較大。假設來說我們這個圖片有300Kb，在PC端可以使用較大的尺寸，那么在移動端，我么就需要一個看起來比較符合舒服的尺寸，這樣既可以節(jié)省帶寬，降低服務器的壓力，也可以更快的讓圖片渲染出來，提供良好的用戶體驗。
2.像素密度問題。做過移動端的開發(fā)的攻城獅都了解過PC的渲染和移動端的渲染是不一樣的。PC端一般是單倍的像素密度，而手機上的顯示器往往是多倍的像素密度。這樣的后果就是我們同樣一張圖，在PC上很清晰，到手機上渲染的時候看起來就很模糊，因為像素擴充了。
3.視覺體驗。因為我們桌面級別的顯示器屏幕的面積更大，可以暴露出來很多圖像的細節(jié)，但是手機屏幕比較小，很多細節(jié)是無法看清楚的，需要突出重點

二、圖片大小的選擇

為了解決體積問題希望不同尺寸的屏幕，顯示不同大小的圖像，我們需要srcset屬性搭配sizes屬性。

上面代碼中，

srcset:

srcset屬性列出四張可用的圖像，每張圖像的 URL 后面是一個空格，再加上寬度描述符。

寬度描述符就是圖像原始的寬度，加上字符w。上例的四種圖片的原始寬度分別為320像素、640像素和1980像素。

2.sizes:sizes屬性給出了三種屏幕條件，以及對應的圖像顯示寬度。寬度不超過440像素的設備，圖像顯示寬度為100%；寬度441像素到900像素的設備，圖像顯示寬度為33%；寬度900像素以上的設備，圖像顯示寬度為254px。

3.瀏覽器根據(jù)當前設備的寬度，從sizes屬性獲得圖像的顯示寬度，然后從srcset屬性找出最接近該寬度的圖像，進行加載。

假定當前設備的屏幕寬度是960px，瀏覽器從sizes屬性查詢得到，圖片的顯示寬度是33vw（即33%），等于320px。srcset屬性里面，正好有寬度等于320px的圖片，于是加載foo-320.jpg。

注意，sizes屬性必須與srcset屬性搭配使用。多帶帶使用sizes屬性是無效的。

四、標簽，標簽

如果要同時適配不同像素密度、不同大小的屏幕，應該怎么辦呢？

這時，就要用到標簽。它是一個容器標簽，內(nèi)部使用和，指定不同情況下加載的圖像。


  
  
  cat

上面代碼中，標簽內(nèi)部有兩個標簽和一個標簽。

標簽的media屬性給出媒體查詢表達式，srcset屬性就是標簽的srcset屬性，給出加載的圖像文件。sizes屬性其實這里也可以用，但由于有了media屬性，就沒有必要了。

瀏覽器按照標簽出現(xiàn)的順序，依次判斷當前設備是否滿足media屬性的媒體查詢表達式，如果滿足就加載srcset屬性指定的圖片文件，并且不再執(zhí)行后面的標簽和標簽。

標簽是默認情況下加載的圖像，用來滿足上面所有都不匹配的情況。

上面例子中，設備寬度如果不超過500px，就加載豎屏的圖像，否則加載橫屏的圖像。

五、標簽的type屬性

除了響應式圖像，標簽還可以用來選擇不同格式的圖像。比如，如果當前瀏覽器支持 Webp 格式，就加載這種格式的圖像，否則加載 PNG 圖像。


  
   
  ACME Corp

上面代碼中，標簽的type屬性給出圖像的 MIME 類型，srcset是對應的圖像 URL。

瀏覽器按照標簽出現(xiàn)的順序，依次檢查是否支持type屬性指定的圖像格式，如果支持就加載圖像，并且不再檢查后面的標簽了。上面例子中，圖像加載優(yōu)先順序依次為 svg 格式、webp 格式和 png 格式。

六、參考鏈接

http://www.ruanyifeng.com/blo...

更多優(yōu)質(zhì)文章請關(guān)注公眾號

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104680.html

相關(guān)文章

  • 老生常談之響應式開發(fā)

    摘要：什么是響應式設計作為一名合格的前端開發(fā)攻城獅工程師，做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢這個時候響應式開發(fā)就應運而生了。五標簽的屬性除了響應式圖像，標簽還可以用來選擇不同格式的圖像。 什么是響應式設計？ 作為一名合格的前端開發(fā)攻城獅（工程師），做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢？這...

    csRyan 評論0 收藏0

  • 設計架構(gòu)

    摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設計方案，希望具有參考價值。，和都是常見的軟件架構(gòu)設計模式，它通過分離關(guān)注點來改進代碼的組織方式。 如何無痛降低 if else 面條代碼復雜度 相信不少同學在維護老項目時，都遇到過在深深的 if else 之間糾纏的業(yè)務邏輯。面對這樣的一團亂麻，簡單粗暴地繼續(xù)增量修改常常只會讓復雜度越來越高，可讀性越來越差，有沒...

    graf 評論0 收藏0

  • 前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網(wǎng)絡安全二三事

    摘要：的網(wǎng)站仍然使用有漏洞庫上周發(fā)布了開源社區(qū)安全現(xiàn)狀報告，發(fā)現(xiàn)隨著開源社區(qū)的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

    syoya 評論0 收藏0

  • 面試寶典

    摘要：有談談面試與面試題對于前端面試的一些看法。動態(tài)規(guī)劃算法的思想及實現(xiàn)方法幫大家理清動態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。極客學院前端練習題道練習題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個 JavaScript 知識點 在 JavaScript 的數(shù)據(jù)綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎(chǔ)...

    neu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<