响应式网站-全屏banner响应的2中方法 - 被吃掉的banner
通常来讲，
设计师们喜欢把banner设计成全屏（1920px或以上）
主题内容控制在一定的范围内一般在1200px左右
这样的设计即可以在宽屏上的表现很好、也能向下兼容一些小屏幕的设备；
如下图（所说的分辨率是实际的展示尺寸的宽度、请勿较真）
那么问题来了；
如果当分辨率小于1200、 拿bootstrap来说、 规定的几个响应尺寸为 小于768px 小于996px 小于1200px 大于1200px这4种尺寸
这时候该如何处理尺寸,比如当前浏览器宽度为1000px时，我们会发现主视觉区域被吃掉了一小部分，再更小的分辨率下吃掉的更多；当然这不是我们想要的结果
方法1：
<img src="768banner.jpg" class="visible-xs" />
<img src="996banner.jpg" class="visible-sm" />
<img src="banner.jpg" class="visible-md visible-lg" />
优点：好理解、而且可以针对不同的分辨率下设置不同的显示效果；
缺点：如果不用js控制、会一次性加载3张图片、这对于移动设备来说可能是个灾难；
方法2（推荐）：
利用calc计算宽度： 比如图片宽度为 1920px、主视觉区域为1200px 当前分辨率是1000px
公式为：图像宽度/主视觉宽度 * 100%
1920px/1000px*100%；
但是，calc的乘法和除法又这样的限制
*乘法，乘数中至少要有一个是
<number>类型的/除法，被除数（/右面的数）必须是
<number>类型的--引用自MDN
索性就直接算出来 1920px/1000px*100% = 1.6*100%;
这样的设置会使主视觉区域跟随着窗口宽度来变化、始终等比缩放！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
</head>
<body>
<style>
ul,li{margin:0;padding:0;}
ul{}
.banner{position: relative;overflow:hidden;}
.banner img{
position: relative;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: calc(1.6*100%);
}
</style>
<div class="banner">
<ul>
<li>
<a href="#">
<img src="banner.jpg" />
</a>
</li>
</ul>
</div>
</body>
</html>
