通常来讲，

设计师们喜欢把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. github上预览Demo网页最简单的方法

    github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...

  2. 老李推荐：第2章2节《MonkeyRunner源码剖析》了解你的测试对象: NotePad窗口Activity之NotesList简介

    老李推荐:第2章2节<MonkeyRunner源码剖析>了解你的测试对象: NotePad窗口Activity之NotesList简介   NotePad窗口Activity之NotesL ...

  3. 整合初步--------->SSH（注解版）

    上面的一篇博客已经介绍了 Spring和Hibernate之间的整合,没看过的童鞋可以去看看,这篇博客讲解Spring+Hibernate+Struts2注解版......... 个人觉得使用注解可能 ...

  4. matlab函数：residue和residuez的用法

    一.residue函数 1. 概念:在部分分式展开式和多项式系数之间转换.(Convert between partial fraction expansion and polynomialcoeff ...

  5. Android -- 贝塞尔二阶实现饿了么加入购物车效果

    1,上周我们实现了简单的三阶贝塞尔曲线效果实例,今天是使用二阶贝塞尔曲线加动画实现的加入购物车效果,在码代码过程中出现了些问题,过一下和大家来探讨探讨,先看一下效果图 2,从上面的效果来看我们基本上可 ...

  6. DAM的使用结合串口和中断以及GPIO。

    DAM的使用结合串口和中断以及GPIO. 当我学到DMA这章的时候就意味着我已经学完了,GPIO里的LED,按键,还有就是串口发送数据. 那么下面就来总结下前段时间所学的知识(因为接下来有断时间我是没 ...

  7. ajax多次请求，只执行最后一次的方法

    ajax多次请求,只执行最后一次的方法 有时候点击按钮进行异步请求数据的时候可能网络差,用户会点击很多次,或者页面有很多相同的按钮,参数不同,但是调用的ajax相同,只想得到最后一次结果 我的思路是用 ...

  8. ecshop打开手机端QQ对话窗口

    ecshop的手机功能比较弱,默认的模板很丑,也不带打开手机端QQ等功能,在程序里添加im等程序变量后,在模板里引入以下代码,即可打开手机端qq对话窗口 <!-- QQ 号码 {foreach ...

  9. 浅析 Jndi / DataSource / ConnectionPool 三者

    最近有个用户量 5W-10W 的 web 应用,频繁导致 weblogic 崩溃,让运维组很难受. 通过几天跟踪系统日志和 weblogic 运行状况,发现报错的姿势有很多,其中对定位问题比较关键的报 ...

  10. Druid Indexing 服务

    索引服务由三个主要组件:一个是peon 组件,可以运行一个任务,一个是Middle Managers组件,管理peons,和一个overlord 组件管理任务分发给Middle Managers. o ...