2. 程式人生 > >分針網—每日分享： 根據屏幕大小，加載不同大小的圖片

分針網—每日分享： 根據屏幕大小，加載不同大小的圖片

阿新 • • 發佈：2017-05-10
head code kth 針對 ive key 寫代碼 ini reat

引言 今天要介紹的東西，很簡單，但是對於前端響應式的時候是個很重要的知識； 我們在用bootstrap這類前端框架時， 雖然頁面局部通過media query實現了，頁面始終無滾動條，響應式頁面。 但是，bootstrap裏面的img-responsive類只是通過設置圖片100%， 並沒有真正的實現在手機上和電腦端加載不同大小的圖片。 代碼其實很簡單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Document</title> <script> document.createElement( "picture" ); </script> </head> <body> <picture> <source srcset="pic1.png" media="(max-width: 600px)"> <source srcset="pic2.png" media="(max-width: 800px)"> <img srcset="pic3.png" alt="pic">
 </picture> </body> </html> 下面是在瀏覽器中的結果，我們打開Chrome瀏覽器，按f12後查看網絡請求 首先是三張圖片 技術分享 默認情況下，屏幕全屏，寬度大於800 技術分享 當頁面寬度在600px-800px（(600,800]）之間時 技術分享 最後是頁面小於等於600px 技術分享 針對上面的代碼，我們解釋一下： 其中的img元素是默認情況下顯示的圖片源， 在其上面的兩個source元素則是在特定媒體查詢（media queries）條件下顯示的圖片。
 這樣我們只需要通過像寫熟悉的css的媒體查詢一樣寫代碼，就能實現根據瀏覽器窗口大小，動態加載圖片。在手機上，就不用加載一個電腦端才顯示的大圖。 GitHub上有位大神，基於以上的原則，編寫了一個picfill的項目，大家有興趣的可以去git上查看。 轉載：http://www.jianshu.com/p/8b725644d9e5 本文轉載自分針網 想學習更多IT知識可加群：272292492 技術分享

分針網—每日分享： 根據屏幕大小，加載不同大小的圖片

相關推薦

分針網—每日分享： 根據屏幕大小，加載不同大小的圖片

head code kth 針對 ive key 寫代碼 ini reat 引言 今天要介紹的東西，很簡單，但是對於前端響應式的時候是個很重要的知識； 我們在用bootstrap這類前端框架時， 雖然頁面局部通過media query實現了，頁面始終無

分針網——每日推薦： 根據屏幕大小，加載不同大小的圖片

加載圖片 引言 今天要介紹的東西，很簡單，但是對於前端響應式的時候是個很重要的知識； 我們在用bootstrap這類前端框架時， 雖然頁面局部通過media query實現了，頁面始終無滾

分針網——每日分享： jquery選擇器的用法

提交 -c sce fse edi scrip 偶數 http n) jQuery選擇器是jQuery庫的一大特色，用這些選擇器不但可以省去繁瑣的JavaScript 書寫方式，還可以節省時間和效率，正是有這些jQuery選擇器，才讓我們更容易的操作JavaScript的

分針網——每日分享：HTML解析原理

html 原理 標準的web前端工程師需要知道 ◎瀏覽器（或者相應播放器）的渲染/重繪原理 這我得加把勁了。我還真的說的不是很清楚，我就G下，結果不是很多，找到了有一個，就記下來了。。。

分針網——每日分享：網站易用性的解讀及提高易用性幾個技巧

什麽是網站易用性？ 引用維基百科上對易用性的解釋：易用性（usability）是一種以使用者為中心的設計概念，易用性設計的重點在於讓產品的設計能夠符合使用者的習慣與需求。以因特網網站的設計為例，希望讓使用者在瀏覽的過程中不會產生壓力或

分針網——每日分享：標簽為什麽要語義化？

標簽 1、手持移動設備的無障礙閱讀 手持移動設備如PDA、智能手機等可能對CSS的解析能力較弱，這時可能就需要更語義的標簽來體現一個頁面的易讀性 2、盲人等一些障礙人士的更好地閱讀 屏幕閱

分針網——每日分享：H5 頁面高級字體應用實踐

背景 最近在開發一個 H5 活動頁快速搭建平臺，可以通過拖拽編輯圖片，文字等元素組件，快速搭建出一個移動端的活動頁面，基本交互和成品效果類似 PPT

分針網—每日分享：ajax提交表單

print win -c 找不到 用戶 post請求 its -o block ajax提交表單在項目中常用，前臺無論是簡單的html、jsp或者是使用了easyui框架，提交表單都會使用到ajax，extjs框架其實也是使用了ajax只不過對其進行了封裝了，我們使用的時

分針網——每日分享：CSS 自定義屬性：API 篇

css JQuery是一個非常優秀的js庫。 選擇元素 $( )裏可以填css選擇器 $(’.demo’).

分針網—每日分享：Vue.js事件處理器與表單控件綁定

pan alt default efault mage add ref comm 功能 事件處理主要通過v-on這個指令來執行。 事件監聽及方法處理 1.簡單的可以直接內嵌在頁面。 2.可以通過將方法定義在methods中，然後再v-on中執行 3

分針網——每日分享：網頁布局時CSS無效的常見原因

css 無效 http://www.f-z.cn/id/186 1、不要擔心驗證程序的警告：如果驗證程序說發現12處錯誤以及83處警告，不要理它，繼續進行下一步。

分針網—每日分享：Redis、Memcache和MongoDB的區別

自動 aof 開發 pre 客戶端 lru perl ash tps http://www.f-z.cn/id/189 Memcached Memcached的優點： Memcached可以利用多核優勢，單實例吞吐量極高，可以達到幾十萬QPS（取決於key、v

分針網——每日分享：git提交錯了如何撤銷或者回退版本

git http://www.f-z.cn/id/184 前言 前面給大家普及了暫存區的概念以及展示的工作區、版本庫中的暫存區和版本庫之間的關系，如果大家都理解的話，那麽今天的課程就很簡單了。

分針網——每日分享：display:inline、block、inline-block的區別

http://www.f-z.cn/id/209 display:block 將元素顯示為塊級元素，特點是：

分針網——每日分享：玩轉 Sublime Text 3

學習更多IT知識 加群：272292492 1. 安裝 Sublime Text 3 進入 Sublime Text 3 官網 下載對應系統安裝包，安裝

分針網——每日分享：HTTP協議理解與應用總結

http 應用總結 領取免費IT資料 加群：272292492 更多文章：www.f-z.cn Request & Response Re

分針網——每日分享：node_modules太大導致ide很卡

node_modules ide 領取免費IT資料 加群：272292492 更多文章：www.f-z.cn 在使用npm install之後 由於node_modules太大導致ide很卡 解決辦法如下

分針網——每日分享：JS常見工具(校驗、通用)

js 工具 加入職業技能圈 q群：272292492 更多文章：www.f-z.cn // 姓名校驗 var checkName = function(name) {

分針網——每日分享：JavaScript進階(四)js字符串轉換成數字的三種方法

加入職業技能圈 q群：272292492 更多文章：www.f-z.cn 在js讀取文本框或者其它表單數據的時候獲得的值是字符串類型的,例如兩個文本框a和b,如果獲得a的value值為11,b的value值為9 ,那麽a.valu

分針網——每日分享：10個程序員常用的代碼簡寫技術

代碼簡寫 加入職業技能圈 q群：272292492 更多文章：www.f-z.cn 今天小編我給大家整理了一份10個程序員常用的代碼簡寫技術，看懂一種是入門，全懂就是大神，你能知道幾個呢？