怎麼根據設計圖做出響應式網頁_響應式中ipad的設計圖是1536的那怎麼換算

1、響應式網站的圖片需要針對不同多個設備製作多個尺寸么？

筆者做響應式網站多年，開始的時候，我讓美工做好幾套設計圖，運用媒體查詢設置斷點，以適配不同的范圍段，320-639、640-1079、大於1080等，後來，我使用rem只使用一套設計圖就可以了。
使用Javascript控制根元素的默認字體大小

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 1400) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

2、響應式設計怎麼讓圖片自適應

總結起來就兩條：
1.怕麻煩，width設成100%妥妥的。
2.不怕麻煩，媒體查詢一個個的解析度情況下設置。

3、響應式中ipad的設計圖是1536的那怎麼換算

響應式抄Web設計(Responsive Web design)的理念是：

頁面的設襲計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。目前國軟科技公司自主研發了同步的響應式網站設計。
做響應式的時候，需要考慮的是1024 * 768、768 * 1280、640 * 960、320 * 480的解析度，其他的都不怎麼考慮。

1024 * 768 是一般電腦屏幕解析度；
768 * 1280是平板橫著時的解析度
640 * 960是平板豎著時的解析度
320 * 480是iphone手機的屏幕解析度。

4、怎樣將圖片轉哈成響應式

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

5、做響應式網站，是不是要先製作好H5響應式模板呢？

響應式布局概念
Responsive design，意在實現不同屏幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

經過不停地學習和實踐，如今總結響應式設計的方法和注意點。其實很簡單。
響應式設計的步驟
1. 設置 Meta 標簽
大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕解析度。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。在<head>標簽里加入這個meta標簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 屬性能夠解決 iPad 切換橫屏之後觸摸才能回到具體尺寸的問題。）
3. 通過媒介查詢來設置樣式 Media Queries
Media Queries 是響應式設計的核心。
它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的解析度小於 980px，那麼可以這樣寫：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}

這里的樣式就會覆蓋上面已經定義好的樣式。
4. 設置多種試圖寬度
假如我們要設定兼容 iPad 和 iphone 的視圖，那麼可以這樣設置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就這樣的一個原理。
一些注意的
1. 寬度需要使用百分比
例如這樣：
#head { width: 100% }
#content { width: 50%; }

2. 處理圖片縮放的方法
簡單的解決方法可以使用百分比，但這樣不友好，會放大或者縮小圖片。那麼可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。
img { width: auto; max-width: 100%; }

用::before和::after偽元素 +content 屬性來動態顯示一些內容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML 結構：
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">

CSS 控制：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}

@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}

6、響應式設計同一張圖片分別用img和background調用，如何讓他們自適應屏幕的大小？顯示的效果一樣

img的思路：JS獲取IMG的長寬比例，然後獲取容器的長寬比，如果容器的長：寬大於或者等於IMG的長寬比例，就把IMG的寬度設置成100%，高度auto，反之則把IMG的高度設置成100%，寬度auto。在CSS裡面添加img{margin:0 -100%}，用display:tabel-cell來做垂直居中(未實驗)。

background的實現方法(CSS3)：用background必須要CSS3才能自適應，代碼是

background-size:cover;backgrond-attachment:fixed;background-position:center;

效果一樣

7、響應式圖片技術的思想是什麼呢？

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

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

8、網站里用JS文件做圖片廣告，怎麼把這個圖片廣告做成響應式的？

使用來css3進行各個屏幕端的自css樣式構造，如：

.wd {
    width:1280px;
    height:200px;
    background:red;
}

@media(max-width:1280px){
    .wd{
        width:960px;
        height:160px;
        bakcground:yellow;
    }
}

每范圍的屏幕大小均可定義不同的css.

9、做了個響應式的網站，地圖不能相應，地圖能做出響應式的嗎

可以的，可以網路一下響應式地圖製作

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

如果圖片是以背景方式存在，這種比較好解決，可以採用媒體查詢，為不同尺寸的顯示回終端設置不同圖片。但答，如果是網頁中插入的圖片解決起來就比較復雜一點了。
一、採用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>

導航:首頁 > 萬維百科 > 怎麼根據設計圖做出響應式網頁

怎麼根據設計圖做出響應式網頁

與怎麼根據設計圖做出響應式網頁相關的知識