响应式瀑布流相册模板(瀑布流式页面布局怎么做)

　　原文：rikkiyun-站酷

　　UI：设计稿的banner图怎么没有全部显示啊？为什么左右两边不见了？1920px * 400px的图被你弄成1600px * 400px了！

　　前端：你电脑屏幕不够宽显示不了啊大姐！

　　UI：给我全部显示啊，那是精华！

　　前端：......

　　5分钟后

　　前端：大姐，你要的全部显示。

　　UI：为什么图片变这么矮了啊，1920px * 400px的图被你弄成1600px * 300px了！不够大气！

　　前端：那个谁，java、php，我们去下午茶吧~

　　UI：￥#@&*%%@#￥

　　-----------------------------------------------

　　类似上面的案例就不多说了，还是说一句吧，banner图在设计时本来就要考虑网页的可视范围毕竟浏览器有很多种分辨率你要考虑最小和最大分辨率的情况不然就是你的错！

　　呐，说好了说一句就是一句吧，马上进入正题！

　　我们以往在做网页设计时都会定一个可视范围，例如宽1600px的画布，我们定可视范围为宽1200px，那么在排版时左右两边多出来400px一般情况下我们都不会塞内容进去，那是留给特殊模块使用的，例如我在写这文章时随手一截的图：

　　右边会有个站酷APP下载的广告，和返回顶部的按钮，这两个组件就不在可视范围内，他们会一直随着页面走。类似这样的功能也有很多，例如很多电商网站都会有一组悬浮按钮在左边，1F-服装，2F-家电，3F-手机……功能都很实用，但都不会是主要内容，主要内容当然显示在可视范围内。

　　那么开篇举出的banner例子，我这里也详细说明一下，首先普及一个主流浏览器分辨率的知识。

　　先忽略移动端，大家可以看到，主流的分辨率是1920，其次是1366，说明大多数人不是在用宽屏的台式机，就是在用手提电脑，那么banner该怎么设计？别急~

　　大家把目光移动到我刚刚随手一截的站酷的那个图片的上面那段话的第一句话：

　　“我们以往在做网页设计时都会定一个可视范围”

　　这里重点强调的是“以往”，因为以往没有响应式设计，什么是响应式设计？就是当分辨率在不同情况下页面会跟随发生不同变化。以往大家都是一个分辨率一稿过，不过现在的网站没有哪几个不做响应式了，因此，版面也要跟着做多个分辨率的版本。大家先有这个概念，我们继续刚刚的“以往”的banner设计，就是一个分辨率一稿过的banner。

　　假如我们定的banner宽是1600px，那么这时就会有2种基本情况，拿一张我2年前做的图来示范哈：

　　1、当分辨率是1920时，怎么显示banner？

　　可以看到，左右两边因为图片不够宽，所以空出来了。假如前端没有设置好，直接将图片重复读取，还会有这种情况：

　　2、当分辨率是1366时，怎么显示banner？

　　因为屏幕太小的原因，无法显示全部图像，两边被裁剪掉了，可以看到图片中“盘”字都被砍了，这样也达不到宣传效果。

　　因此，在设计banner时，尽量按1920来设计，再定一个可视范围，这里建议1200，也就是说，左右两边空出来位置是可有可无的设计，如纯色、渐变色、装饰性的花纹等。

　　这里顺便给大家科普一下前端实现这个banner的方法哈。

　　前提：banner设计宽为1920px，高为400px。

　　首先前端会定一个高度，这个高度根据banner的高而定，所以定400px，而宽度是不用理会的，因为在前端的世界里background是可以多种设置的。那么就会有以下几种展示：

　　一般来说，居中展示使用情况是最多，而且也最能适配任何分辨率的（不好意思，上面打错字了，但我懒得改了哈哈哈哈哈）。

　　有人问，不能把图片在任何分辨率都撑满屏幕吗？可以的，不过又有3种情况：

　　在任何分辨率下都显示全图，这种情况属于移动端会多一点，还有一种特殊情况就是客户要求。。。

　　我在做外单的时候还真遇过这样的客户，当时是做企业官网，要求以他（老板）的手提电脑（分辨率1366*768）为主，他说现在很多老板都在用手提电脑，所以我们要以手提电脑的视觉效果为主，并且在banner（banner设计初稿大概1920*600）下面要露出一点点企业介绍的内容又不能太多，很微妙的感觉。。。

　　我的天，每个浏览器的地址栏标签栏收藏夹栏都不一样高度，系统的任务栏也是不一样的高度，这些高度加起来大概在100px上下浮动20px，当时我身边没有手提电脑，做不了实际测试，就那banner（最终设计稿大概在1920*460左右）的高度调了差不多1天时间才让对方满意，但重点是，你不知道老板都是让员工去找解决方案的吗，员工用的电脑难道都是手提电脑吗。。。

　　好吧，题外话就不说了，我们的职责是让客户满意！

　　刚才说的这些基本都是以往的做法，现在响应式设计可以说是必备技能，那么在响应式下应该怎么做banner呢？

　　在前端的世界里，是可以根据不同分辨率作出不同的样式和排版，甚至新的元素在某个分辨率下出现或消失都可以实现，那么banner同样也可以根据不同分辨率以不同方式展现，例如：

　　在PC主流的分辨率下，前端可将banner用居中的方式展现，设计师在做banner设计时只需要设定一个可视范围就够了，一般情况下还是推荐宽1200px作为可视范围。

　　在移动端的分辨率下，前端可将banner用等比例缩放的方式展现，设计师在做banner设计时无需顾虑太多，图片怎么出就怎么展现。

　　当然，很多时候大家因为懒得处理这么细致，直接就是用居中的方式实现，省时省力。各位还是就实际情况跟前端讨论如何实现banner的展示吧。

　　除了banner，网页背景大图也是同样处理方式，不同的是背景大图可一直固定位置，也可随着页面的下拉而消失，但展示方式基本如上。

　　以上是我的一些见解，说得很浅，但容易理解，之后会一步一步引领大家多了解前端的世界。