簡單大圖锣杂，元素空或者<img/>
一般簡單大圖可考慮<img> 元素匙姜，設(shè)其寬度100%就可以了畅厢。
如果想通過background來設(shè)置，需要設(shè)置高度氮昧，算下長寬比框杜，如果是10:6的話，則可以設(shè)置padding-top:60%; 這樣子還是撐開的袖肥！
.head-img{
background: url('./themeimg.png') no-repeat;
background-size:100%;
padding-top: 61%;
}
作為背景圖處理時咪辱，背景內(nèi)有元素，一般是想辦法將元素?fù)伍_
通常情況椎组，css像素和屏幕像素是一致的油狂，除非放大或者縮小寸癌！
獲取瀏覽器尺寸／你可以通過window.innerWidth和window.innerHeight來獲取這些尺寸专筷。注意度量的寬度和高度是包括滾動條的。它們也被視為內(nèi)部窗口的一部分蒸苇。
window.pageXOffset和window.pageYOffset 這兩個單位回頭見磷蛹！
viewport的尺寸可以通過document.documentElement.clientWidth和-Height得到。（不包含滾動條填渠，這是和window.innerWidth的區(qū)別Ｏ夷簟！７帐病）
document.documentElement.offsetWidth/Height這個可以測量<html>元素的尺寸
90%的時間你將會使用pageX/Y莺葫；通常情況下你想知道的是相對于文檔的事件坐標(biāo)。其他的10%時間你將會使用clientX/Y枪眉。你永遠(yuǎn)不需要知道事件相對于屏幕的坐標(biāo)捺檬。
這兒有兩個對應(yīng)的媒體查詢：width/height和device-width/device-height。
width/height使用和documentElement .clientWidth/Height（換句話說就是viewport寬高）一樣的值贸铜。它是工作在CSS像素下的堡纬。
device-width/device-height使用和screen.width/height（換句話說就是屏幕的寬高）一樣的值聂受。它工作在設(shè)備像素下面。
visual viewpoint (window.innerWidth/Height) 和 layout viewpoint(document.documentElement.clientWidth/Height)的區(qū)別
layout viewport的寬度和高度等于在最大限度縮小的模式下屏幕上所能顯示的任何內(nèi)容的尺寸烤镐。當(dāng)用戶放大的時候這些尺寸保持不變蛋济。
自適應(yīng)
這個方法很好啊，可以根據(jù)不同瀏覽器自適應(yīng)字體大小炮叶，只需要根據(jù)根字體設(shè)置rem即可碗旅。document.documentElement.clientWidth可以得到viewport的寬度。
doc.document就是<html>元素镜悉，viewport相當(dāng)于裝了<html>元素
(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 / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
文檔的寬度來自于viewport的寬度祟辟，我們把這個viewport稱為layout viewport，因為它和布局有關(guān)侣肄。
思考旧困？如果將一個960的頁面塞進(jìn)一個實際尺寸320的的框框，要是這個頁面完全塞得下稼锅，必然要縮小網(wǎng)頁
注意設(shè)置 <meta name='viewport' content='width=device-width'> 標(biāo)簽吼具。這個好像就是虛擬出一個320的窗口
總結(jié)下為什么瀏覽器上次本地測試ok情況下，服務(wù)器上字體變大缰贝，是因為開始沒有在meta里設(shè)置content=width=這個屬性馍悟，所以瀏覽器中即使設(shè)為手機(jī)模式console.log(document.documentElement.clientWidth);得出的屬性是980，然后還原效果圖時是以980為基礎(chǔ)的剩晴，所以要還原出效果自然就放大了字體比例锣咒，服務(wù)器模板html中<meta name='viewport' content='width=device-width'>這句話實際設(shè)置了width為320，似乎就是把<html>寬度設(shè)置為了320(通常web端是不設(shè)固定寬度的赞弥，寬度100%,這樣寬度就是瀏覽器寬度了毅整，思考你如果將一個web頁面設(shè)置位寬度320是個什么樣子)
