响应式网站-全屏banner响应的2中方法

通常来讲，

设计师们喜欢把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>

响应式网站-全屏banner响应的2中方法 - 被吃掉的banner

推荐阅读