|
UI：设计稿的banner图怎么没有全部显示啊？为什么左右两边不见了？1920px * 400px的图被你弄成1600px * 400px了！
前端：你电脑屏幕不够宽显示不了啊大姐！
UI：给我全部显示啊，那是精华！
前端：......
5分钟后
前端：大姐，你要的全部显示。
UI：为什么图片变这么矮了啊，1920px * 400px的图被你弄成1600px * 300px了！不够大气！
前端：那个谁，java、php，我们去下午茶吧~
UI：￥#@&*%%@#￥
-----------------------------------------------
类似上面的案例就不多说了，还是说一句吧，banner图在设计时本来就要考虑网页的可视范围毕竟浏览器有很多种分辨率你要考虑最小和最大分辨率的情况不然就是你的错！
呐，说好了说一句就是一句吧，马上进入正题！
我们以往在做网页设计时都会定一个可视范围，例如宽1600px的画布，我们定可视范围为宽1200px，那么在排版时左右两边多出来400px一般情况下我们都不会塞内容进去，那是留给特殊模块使用的。
类似这样的功能也有很多，例如很多电商网站都会有一组悬浮按钮在左边，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是可以多种设置的。
一般来说，居中展示使用情况是最多，而且也最能适配任何分辨率的（不好意思，上面打错字了，但我懒得改了哈哈哈哈哈）。
有人问，不能把图片在任何分辨率都撑满屏幕吗？
在任何分辨率下都显示全图，这种情况属于移动端会多一点，还有一种特殊情况就是客户要求。。。
我在做外单的时候还真遇过这样的客户，当时是做企业官网，要求以他（老板）的手提电脑（分辨率1366*768）为主，他说现在很多老板都在用手提电脑，所以我们要以手提电脑的视觉效果为主，并且在banner（banner设计初稿大概1920*600）下面要露出一点点企业介绍的内容又不能太多，很微妙的感觉。。。
我的天，每个浏览器的地址栏标签栏收藏夹栏都不一样高度，系统的任务栏也是不一样的高度，这些高度加起来大概在100px上下浮动20px，当时我身边没有手提电脑，做不了实际测试，就那banner（最终设计稿大概在1920*460左右）的高度调了差不多1天时间才让对方满意，但重点是，你不知道老板都是让员工去找解决方案的吗，员工用的电脑难道都是手提电脑吗。。。
好吧，题外话就不说了，我们的职责是让客户满意！
|
