响应式设计中要保证图片尽可能精简

发布日期:2015-07-25 17:08:24

响应式设计中要保证图片尽可能精简
为了说明上述代码结构的问题,我已经提前参照设计图在css中增加了一些装饰性样式。既然要做响应式设计,那我肯定会用最精简的办法来切取背景图片。例如,对于设计图顶部和底部的小彩旗,我不会制作一个长条图片,而只是切取其中的两面小旗。这个切片作为背景图在视口中水平重复,从而给人一种长条旗帜图片的错觉(不论视口有多宽都行)。这种方法为两处背景分别节省了16KB(960像素宽的一png长条旗帜图一张20K13,而精简的切片图只有4KB)。这样你就为通过乎机上网的用户节省了一部分流量!下图展示了这个切片图输出前的样子(放大到了600%):
在背景图片和文字大小都设置停当之后,And the winner isn't..

要让样式完美,还有很多工作要做。例如,导航按钮颜色应该交替使用红色和黑色,缺少内容区的THESE SHOULD HAVE WON按钮和侧边栏的full info按钮,字体与设计图效果相去甚远。不过,所有这些间题都可以使用HTML5和CSS3来解决。使用HTML5和CSS3,而不再是简单插人图片(如我们以前做过的那样),会使网站与我们的响应式目标步调一致。时刻谨记,我们在做北京网站设计时要保证代码和数据都尽可能精简,以便为带宽有限的用户提供偷悦的体验。

相关阅读:

为什么响应式网站设计​需要媒体查询

网站制作案例

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计