圖片怎麼響應式

Ⅰ 怎樣將圖片轉哈成響應式

1、首先圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。
2、是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480 < 寬度 <= 768，載入120px的圖片， 寬度> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
3、響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。
4、圖片設置 max-width 至於是不是要設置多張不同尺寸的圖片 應該是看你的需求到底是針對哪些人群 如果設置多張建議兩張就夠了 設置一張稍微大點的 等比縮放也是不錯的選擇個人習慣是設置寬度跟max-width

Ⅱ 響應式圖片技術的思想是什麼呢

響應式圖片技術思想：不僅要同比的縮放圖片，還要在小設備上降低圖片自身的解析度。這個技術的實現需要使用幾個相關文件，我們可以Github上獲取。包括一個JavaScript文件(rwd-images.js)，一個.htaccess文件，以及一些範例資源文件。大致的原理是，rwd-images.js會檢測當前設備的屏幕解析度，如果是大屏幕設備，則向頁面head部分中添加BASE標記並將後續的圖片、腳本和樣式表載入請求定向到一個虛擬路徑"/rwd-router"。當這些請求到達伺服器端，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片"，並進行相應的反饋輸出。對於小屏幕的移動設備，原始尺寸的大圖片永遠不會被用到。響應式設計，就是同一個頁面文件，在不同的設備端呈現不同的樣子。在我看來，它的缺點有頁面載入的代碼多了，導致文件增大了，影響載入速度。為了適配不同的設備，響應式設計需要大量專門為不同設備打造的css及js代碼，這影響了頁面載入速度。尤其是js代碼，若處理不好，在配置低的機子上瀏覽會很卡。

雖然可以通過某些技術選擇性地載入響應式設計代碼，但瀏覽器對這方面的機制支持還不夠完善。在響應式設計中，圖片、視頻等資源一般是統一載入的，這就導致在低分辯率的機子上，實際載入了大於它的顯示要求的圖片或視頻，導致不必要的流量浪費，影響載入速度。雖然現在有各種智能判斷設備特性而載入不同圖片或視頻的技術，但瀏覽器支持同樣不夠完善。對大型門戶或電商網站來說，響應式設計目前確實不太適合。

Ⅲ 怎麼實現網站的響應式布局，適合不同解析度

如我們需要兼容不同屏幕解析度、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設計方案滿足所有情況？對此，馬海祥覺的我們的布局應該是一種彈性的柵格布局，不同尺寸下彈性適應，如以下頁面中各模塊在不同尺寸下的位置：

那麼我們具體要怎麼做呢？
1、Meta標簽定義
使用 viewport meta 標簽在手機瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通過快捷方式打開時全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />
隱藏狀態欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉
<meta name="format-detection" content="telephone=no" />
2、使用Media Queries適配對應樣式
常用於布局的CSS Media Queries有以下幾種：
設備類型(media type):
all所有設備；
screen 電腦顯示器；
print列印用紙或列印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文列印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。
設備特性(media feature):
width瀏覽器寬度；
height瀏覽器高度；
device-width設備屏幕解析度的寬度值；
device-height設備屏幕解析度的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大於等於寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。
例子：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
適用於布局的Media Queries，這里在馬海祥博客上我們就不再做詳述，有興趣的話，可通過官方文檔進一步了解。
3、表格(table)的響應式處理
那麼對於表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對表格響應式處理的方法：
（1）、隱藏不重要數據列
處理前：

（點擊查看大圖）
處理後：

實現方法代碼：
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以用戶角度思考，每個人對數據的認知不同，或許你隱藏的數據對於他卻是很重要的，所以對於這種方法馬海祥並不推薦。
（2）、多列橫向變2列縱向
處理前：

處理後：

實現方法：<thead>定位隱藏，<td>變塊元素，並綁定對應<th>列名，然後用偽元素的content:attr(data-th)實現<th>：

（3）、固定首列，剩餘列橫向滾動
處理前：

處理後：

實現原理代碼：
thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}
二、響應式內容
1、響應式圖片
帶寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的圖片還是PC上的大圖；文件體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那麼我們就得把圖片也處理成響應式的根據終端類型尺寸解析度來適配出合理的圖形。

處理原理：瀏覽器獲取用戶終端的屏幕尺寸、解析度邏輯處理後輸出適應的圖片，如屏幕解析度320*480，那麼我們匹配給它的是寬度應小於320px的圖片。如果終端屏幕的DPI(device pixels)DPI詳解值很高，也就是高清屏，那麼我們就得輸出2倍解析度的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的屏幕參數可通過http://screensiz.es/phone查詢。
解決方案：其實W3C已經有一個用於響應式圖形的草案：新定義標簽<picture>，因為它還只是草案，目前還沒有支持的瀏覽器，期待在不久的未來我們能用上。雖然目前不支持，但我們還是來了解下，為之後的內容做個鋪墊。
<picture>是一個圖形element，內容由多個源圖組成，並由CSS Media Queries來適配出合理圖形，代碼規范如下：
<picture width="500" height="500">
<source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
<!-- Fallback content-->
<noscript>
<img src="external/imgs/small.jpg" alt="Team photo">
</noscript>
</picture>
註：source: 一個圖片源；
media: 媒體查詢，用於適配屏幕尺寸；
srcset: 圖片鏈接，1x適應普通屏，2x適應高清屏；
<noscript/>: 當瀏覽器不支持腳本時的一個替代方案；
<img/>: 初始圖片；另外還有一個無障礙文本，類似<img/>的alt屬性。
雖然<picture>目前還不支持，但它的原理我們是可借鑒的，所以就誕生了一個用於圖片響應式處理的類庫Picturefill
<span data-picture data-alt="圖片描述文本">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- 瀏覽器不支持JS時的備用方案. -->
<noscript>
<img src="external/imgs/small.jpg" alt="圖片描述文本">
</noscript>
</span>
其原理就是JS獲取Source的源以及CSS Media Queries規則，輸出適應圖片，邏輯細節這里不再解析，感興趣的可查看其JS代碼，邏輯不是很復雜，也可以自己封裝一個類庫，以適用於自身產品，例如圖片載入失敗的替代方案。
當然，在未來的CSS Image Level 4中已經實現了響應式圖片的原生語法：image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>
那麼我們的響應式圖片可以這樣重寫了
background-image:url(default.jpg); /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
註：Webkit 目前只實現了 url() 形式的取值，且dppx值取負值[-2x]貌似也是合法的。
當然除此之外，還有其他的響應式處理，如服務端user-agent嗅探。
2、高解析度(DPI)下的響應式處理
（1）、SVG：優點可承載色彩豐富、設計復雜圖形，且渲染不會出現邊緣不順滑；缺點是IE的支持不完美。
（2）、Icon fonts：支持多瀏覽器，圖形顏色大小的修改成本低，易於維護；圖形表現單一，不支持色彩豐富且復雜的圖形，IE6渲染有毛邊。
（3）、-webkit-image-set:只支持單個圖形的適配，不利於圖形合並，兼容不完美（Safari 6+, Chrome 21+）。
JS檢測：var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
3、高解析度下的1px border
由於高清屏的特性，1px是由2×2個像素點來渲染，那麼我們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設計稿有出入，為了追求1px精準還原，我們就不得不拿出一個完美的解決方案。

在Photoshop中，如果需要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，我們在retina屏下需要做到真實的1px邊框，可利用box-shadow屬性模擬。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}

Ⅳ 如何解決響應式網站圖片響應問題

如果圖片是以背景方式存在，這種比較好解決，可以採用媒體查詢，為不同尺寸的顯示終端設置不同圖片。但，如果是網頁中插入的圖片解決起來就比較復雜一點了。
一、採用srcset屬性，如下代碼
<img src="默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">
srcset裡面是根據媒體查詢條件顯示不同圖片，跟上面差不多一樣，表達方式不一樣，1x表示顯示器像素密度顯示倍數。
兩者結合的方式實現，各大瀏覽器最新的版本基本都支持，但是IE系列的不支持，比較嚴重的問題是QQ瀏覽器以IE為內核，微信瀏覽器不支持，而微信在國內的使用率非常高，加之微信公眾平台的微官網是客戶的常見需求,好的解決辦法是使用Picturefill。
二、採用picture元素，如下代碼
<picture alt="">
<source src="大圖路徑" alt="" media="(min-width: 640px)">
<source src="小圖" alt="" media="(max-width: 639px)">
<img src="默認圖片" alt="" alt="">
</picture>

Ⅳ 如何在網頁中製作響應式的SVG圖像

SVG（可縮放矢量圖形）：可縮放矢量圖形是基於可擴展標記語言（標准通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標准。
SVG圖片格式的優勢：
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕解析度和列印解析度。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。

Ⅵ 網頁設計中響應式具體怎麼實現

響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的響應式站點列表（譯者註：可以好好看看示例中的網站在不同解析度下的展現方式）。對新手來說，響應式設計可能有一點復雜，但是事實上比你想像的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到響應式設計和媒介查詢（Media Queries）的基本原理（假定你了解基本的CSS知識）。

第一步：Meta標簽

大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕解析度。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。

第二步：HTML結構

在這個例子里，我有一個包括頭部、內容、側邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。

第三步：媒介查詢-Media Queries

CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

當視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。

然後為小於等於700像素的視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。

對於小於等於480像素（手機屏幕）的情況，將#header元素的高度設置為自適應，將h1的字體大小修改為24像素並隱藏側邊欄。

你可以根據你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個媒介查詢。媒介查詢的目的在於為指定的視圖寬度指定不同的CSS規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。

Ⅶ 什麼是響應式布局

響應式布局設計，是指將桌面設備上的網頁內容在移動設備上進行優化排版，使用戶能夠在移動設備上更方便地閱讀並操作。其實，如果經常使用不同的設備瀏覽互聯網網頁，就會比較容易體會響應式布局設計在移動設備上的應用。

頁面的設計根據使用設備環境進行相應的響應和調整，具體的實踐方式由多方面組成的。最主要的是三種技術實現的：

布局響應是對頁面進行設計，需要對相同的內容進行不同的布局設計。一種是桌面向下設計，一種是移動端向上的設計。無論那種設計，都要兼容所有的設備。

隨著大屏幕移動設備的普及，隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。給我們提供了更加舒適的界面體驗。

Ⅷ html+css左邊是兩列右邊是圖片請問怎麼布局成響應式

用兩個div，左邊div浮動並包含ul層，右邊div浮動包含img。至於樣式，左右兩邊的div按照比例設置個百分比寬度，給個媒體查詢media當小於一定程度，左右div寬度為100%。ul中的li則設置寬度為50%，img設置100%就行了

Ⅸ 響應式網頁中圖片的處理方式

圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。

如果是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480 < 寬度 <= 768，載入120px的圖片， 寬度> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。

這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。

我覺得響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。

Ⅹ 響應式切圖是什麼

響應式切圖可以去了解一下媒體查詢。通過媒體查詢當前設備視圖區的寬度，來調整整體頁面的布局。

響應式切圖更多的是我們要用web前端開發傳統應用程序，我們做pc端，移動端，各種響應式，web 游戲，web 企業管理系統，web 移動程序，開發一個大規模項目，html5游戲，甚至用js開發傳統高級語言才能做的資料庫交互，不用後台語言，就靠我們js做後台。

響應切圖誤區：

響應式切圖大家都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，首先處理的是什麼類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網站或電商網站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。

響應式第二個是體積，所以切圖時候一定注意少用圖片工具，採用div+css布局更能減小網頁體積是表現與內容分離。