通常来讲，

设计师们喜欢把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. Poptest学员之当小厨师变成测试开发工程师

    没开玩笑,这是我们的真实案例.做培训以来,各行各业转行做测试的学员见得太多了.修车的.客服的.销售的.司机的.医护的.前台的等等.职位虽然不分贵贱,但是薪资却分多少.每个人心中都有让家人和自己过上好日 ...

  2. Android之利用正则表达式校验邮箱、手机号、密码、身份证号码等

    概述 现在Android应用在注册的时候基本会校验邮箱.手机号.密码.身份证号码其中一项或多项,特此收集了相关的正则表达式给大家分享.除了正则表达式,文章末尾提供Demo中有惊喜哦! 具体验证的图片效 ...

  3. [C#] 使用 StackExchange.Redis 封装属于自己的 Helper

    使用 StackExchange.Redis 封装属于自己的 Helper 目录 核心类 ConnectionMultiplexer 字符串(String) 哈希(Hash) 列表(List) 有序集 ...

  4. DataTable 转实体

    因为Linq的查询功能很强大,所以从数据库中拿到的数据为了处理方便,我都会转换成实体集合List<T>. 开始用的是硬编码的方式,好理解,但通用性极低,下面是控件台中的代码: using ...

  5. 关于css解决俩边等高的问题

    前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很多的方法都 ...

  6. Java 原始数据类型的计算：运算符重载（Operator Overload）和类型转换（Type Conversion)

    原文阅读:<算法(第四版)>第一章 第一节:基础编程模型 有没有在面试的时候被问到:下面这几行代码的执行结果是什么?依据是什么? System.out.println (5/3); Sys ...

  7. 【Spark2.0源码学习】-1.概述

          Spark作为当前主流的分布式计算框架,其高效性.通用性.易用性使其得到广泛的关注,本系列博客不会介绍其原理.安装与使用相关知识,将会从源码角度进行深度分析,理解其背后的设计精髓,以便后续 ...

  8. 【2017-04-18】Ado.Net C#连接数据库进行增、删、改、查

    一.简介 1.ado.net是一门数据库访问技术. 他可以通过程序来操作数据库 2.类库 Connection 类 和数据库交互,必须连接它.连接帮助指明数据库服务器.数据库名字.用户名.密码,和连接 ...

  9. 除去ubuntu的grub引导

    除去ubuntu的grub引导 step如下>> 进入ubuntu终端 sudo gedit /etc/defauli/grub 将 #GRUB_HIDDEN_TIMEOUT=0 最前面的 ...

  10. Asp.net Authorization 学习

    其实使用新的Identity以来一直有一个疑惑,之前的角色管理 在新的Identity中怎么管理的.[AspNetUserClaims] 在新的授权管理中又占什么位置 第一,根据角色授权,刚刚注册的用 ...