简单大图，元素空或者![]()
一般简单大图可考虑 元素，设其宽度100%就可以了。
如果想通过background来设置，需要设置高度，算下长宽比，如果是10:6的话，则可以设置padding-top:60%; 这样子还是撑开的！
.head-img{
background: url('./themeimg.png') no-repeat;
background-size:100%;
padding-top: 61%;
}
作为背景图处理时，背景内有元素，一般是想办法将元素撑开
通常情况，css像素和屏幕像素是一致的，除非放大或者缩小！
获取浏览器尺寸／你可以通过window.innerWidth和window.innerHeight来获取这些尺寸。注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分。
window.pageXOffset和window.pageYOffset 这两个单位回头见！
viewport的尺寸可以通过document.documentElement.clientWidth和-Height得到。（不包含滚动条，这是和window.innerWidth的区别！！！）
document.documentElement.offsetWidth/Height这个可以测量元素的尺寸
90%的时间你将会使用pageX/Y；通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。
这儿有两个对应的媒体查询：width/height和device-width/device-height。
width/height使用和documentElement .clientWidth/Height（换句话说就是viewport宽高）一样的值。它是工作在CSS像素下的。
device-width/device-height使用和screen.width/height（换句话说就是屏幕的宽高）一样的值。它工作在设备像素下面。
visual viewpoint (window.innerWidth/Height) 和 layout viewpoint(document.documentElement.clientWidth/Height)的区别
layout viewport的宽度和高度等于在最大限度缩小的模式下屏幕上所能显示的任何内容的尺寸。当用户放大的时候这些尺寸保持不变。
自适应
这个方法很好啊，可以根据不同浏览器自适应字体大小，只需要根据根字体设置rem即可。document.documentElement.clientWidth可以得到viewport的宽度。
doc.document就是元素，viewport相当于装了元素
(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，因为它和布局有关。
思考？如果将一个960的页面塞进一个实际尺寸320的的框框，要是这个页面完全塞得下，必然要缩小网页
注意设置 标签。这个好像就是虚拟出一个320的窗口
总结下为什么浏览器上次本地测试ok情况下，服务器上字体变大，是因为开始没有在meta里设置content=width=这个属性，所以浏览器中即使设为手机模式console.log(document.documentElement.clientWidth);得出的属性是980，然后还原效果图时是以980为基础的，所以要还原出效果自然就放大了字体比例，服务器模板html中这句话实际设置了width为320，似乎就是把宽度设置为了320(通常web端是不设固定宽度的，宽度100%,这样宽度就是浏览器宽度了，思考你如果将一个web页面设置位宽度320是个什么样子)