通常来讲，

设计师们喜欢把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. 实现标签的添加与删除(tags)

    在项目中会遇到,标签(tags)的添加与去除的需求 demo:我们有 tags   '专利','商标','版权','域名' demand:在发布内容的时候,要求可以添加tag,(实现tag的增加与删除 ...

  2. Ubuntu下php网站运行环境搭建

    第一步:查看是否安装lamp相关软件: dpkg -s 软件名称,比如php.mysql.apache. dpkg-query -l 软件名称 要列出你系统中安装的所有包,输入下面的命令:dpkg - ...

  3. 自行扩展 FineUIMvc 通知对话框（多个并排显示不重叠，支持最新的显示在最上方）

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 这篇文章我们将改造 FineUIMvc 默认的通知对话框,使得同时显示多个也不会重叠.并提前出一个公共的JS文件,供大家使用. ...

  4. Java 基础知识总结 2

    11.Java常用类: StringBuffer StringBuffer 是使用缓冲区的,本身也是操作字符串的,但是与String类不同,String类的内容一旦声明之后则不可以改变,改变的只是其内 ...

  5. 关于AysncController的一次测试（url重写后静态页文件内容的读取是否需要使用异步？）

    因为做网站的静态页缓存,所以做了这个测试 MVC项目 准备了4个Action,分两组,一组是读取本地磁盘的一个html页面文件,一组是延时2秒 public class TestController ...

  6. JAVA Struts2 搭建

    java  struts 2搭建 1.web工程 2.将struts2 用到的jar包,拷贝到webcontent/webinf/lib文件夹.下 3.webcontent  下的web.xml  下 ...

  7. JS模式--通用对象池的实现

    var objectPoolFactory = function (createObjFn) { var objectPool = []; return { create: function () { ...

  8. uoj#179 线性规划

    这是一道模板题. 本题中你需要求解一个标准型线性规划: 有nn个实数变量x1,x2,⋯,xnx1,x2,⋯,xn和mm条约束,其中第ii条约束形如∑nj=1aijxj≤bi∑j=1naijxj≤bi. ...

  9. [KISSY5系列]KISSY5安装使用(二)

    上篇文章,我们遗留的一个问题就是,请求数量有点多,虽然现在的浏览器的请求资源都是并发的.但是我们还是尽量减少请求量. 但是KISSY里面这个问题我们怎么解决呢,其实还是从data-config=&qu ...

  10. 图零直播新闻发布会—TOLINK2.0全面上线

    在网络直播时代和现代信息技术条件下,教务管理正在由传统管理方式向数字化管理模式转变.教务管理创新需要现代信息技术来实现,使得教务管理的质量和效率得到了质的飞跃.图零直播,中国IT在线直播教育引领者,在 ...