通常来讲，

设计师们喜欢把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的更多相关文章

  1. 使用CSS3实现响应式标题全屏居中和站点前端性能

    要实现标题全屏居中(同一时候在垂直和水平方向居中).有若干种方法,包含使用弹性布局.表格单元.绝对定位和自己主动外边距等. 全屏居中 当中眼下比較流行也比較easy理解的方法是使用绝对定位+偏移实现. ...

  2. Skeljs – 用于构建响应式网站的前端开发框架

    skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...

  3. 了解Bootstrap和开发响应式网站

    什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...

  4. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  5. 【Web探索之旅】第二部分第五课：响应式网站和移动应用

    内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...

  6. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  7. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  8. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  9. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

随机推荐

  1. 不忘初心 --- 重读<<The C Programming Language>>

    这篇文章应该发布在好几年前,2011年计算机界大师Dennis Ritchie仙逝,那时对大师的映象还停留在大一刚学编程时:Unix的合作开发者,C语言的发明人.通过网上的纪念文章<<Un ...

  2. 原型prototype、原型链__proto__、构造器constructor

    创建函数时,会有原型prototype,有原型链__proto__,有constructor.(构造函数除外,没有原型) . prototype原型:是对象的一个属性(也是对象),使你有能力向对象添加 ...

  3. .Net 官方学习文档

    .Net 官方学习文档:https://docs.microsoft.com/zh-cn/dotnet/articles/welcome

  4. folly教程系列之：future/promise

         attension:本文严禁转载. 一.前言 promise/future是一个非常重要的异步编程模型,它可以让我们摆脱传统的回调陷阱,从而使用更加优雅.清晰的方式进行异步编程.c++11中 ...

  5. AngularJS学习笔记2

    3.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}.AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. ...

  6. elasticsearch基础概念

    接近实时(NRT)        Elasticsearch是一个接近实时的搜索平台.这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒).           集群(clu ...

  7. 为linux安装xen-tools提示/dev/xvdd does not exist

    看样子百度还是不如google啊.百度上找到的信息完全无用.google上却给我找到了... 1:当/dev/xvdd does not exist错误出现时,可以尝试下 mount /dev/cdr ...

  8. Lucene工作原理

    Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...

  9. LeetCode 207. Course Schedule（拓扑排序）

    题目 There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have p ...

  10. spring-mvc @Controller 200-不生效

    复杂的故事简单说,复杂的问题简单做.问题记录. 现象 新增加一个Controller,但在js中调用时报请求200,无请求反馈,重启服务多次,问题依旧. controller 分析 从问题现象分析:2 ...