通常来讲，

设计师们喜欢把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. Debian 8开启sftp服务

    看到某云的CDN居然是使用ftp这种早该淘汰的协议,不禁有些吐槽.ftp曾经作为互联网上最重要的协议,但漫长使用过程中体现出的各种缺点,已不适合再使用.其中最致命的问题就是明文传输用户密码.建议使用这 ...

  2. 用webpack搭建react开发环境

    安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...

  3. 2017.3.12 H5学习的第一周

    本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...

  4. jQuery小测的总结

    1.在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has() 答案: $(div:has(s ...

  5. UITableView grouped样式使用探索

    UITableView的style有plain和grouped两种样式,两种样式各有不同的风格和功能,plain样式已经封装好了悬停功能,gouped样式则为我们在区头和区尾在实际项目开发中需要我们选 ...

  6. 为什么大多数培训机构还停留在只教ssh框架？

    最近听一些朋友说,招聘面试的很多人简历都差不多,大部分人的简历上面都写了熟悉ssh框架,我朋友就在吐槽,为什么这些人简历都差不多,并且都熟悉ssh框架? 后面他说, 可能这些人都是培训机构出来的, 然 ...

  7. LinkedList 学习笔记

    先摆上JDK1.8中hashMap的类注释:我翻译了一下 /** * Doubly-linked list implementation of the {@code List} and {@code ...

  8. Linux 基础（3）

    Linux 基础(三) rpm与yum学习 本篇分享一下自己学习rpm和yum过程中的一些心得,自己在使用yum过程中由于自己的虚拟机网络的问题在学习这一块品尝到不少苦头,还望学习这块的盆友先检查一下 ...

  9. 关于System.Windows.Forms.DateTimePicker的一个Bug

    几天接到客户的反馈,说系统无法查询2017年2月份的账单,原因是没办法选择2017年2月份,没办法选择2月份???,马上开启vs,运行系统,应为市去年的系统,测试数据也是去年的,就查询了2016年2月 ...

  10. 搭建自己的Git服务器

    前言: GitHub是一个免费托管开源代码的远程仓库,使用起来即方便又安全,但在国内有时访问巨慢,原因你懂得.还有一些公司和个人视源码如生命,既不想开源代码又不想给Github交保护费.这时搭建一个自 ...