响应式网站之banner解决方案(通过调整比例从而在手机上获得正常浏览效果)

发布时间:2018/9/19 8:11:58来源:佑航科技

      响应式其实是一种布局,是为了自动适配不同终端设备而自动响应的排版布局,在网站建设行业属于前端排版环节。

 

      响应式网站即通常人理解的自适应网站,能够兼容PC、手机、平板电脑等众多的终端设备。在大部分终端访问时,都能够正常显示,如:在电脑上打开时显示为宽屏,手机上会自动适应屏幕的宽度,内容满屏显示,超出宽度的会自动换行。

 

      网页元素中,部分内容是可以利用自动换行来解决不同终端显示问题。如产品列表、图片、文字说明等,都可以自动适应手机的宽度。但是网站banner(导航下方的“幻灯片”),为了适应目前显示器的主流宽度:1920像素,以及最佳观赏效果,都会做成1920像素,高度不固定。这样的尺寸在分辨率为1920×1050像素电脑上能够完美展示,而在其它较低的分辨率的电脑上,如1680x1050像素、1280×800像素等,banner只能显示中间的一块,超出的部分会自动隐藏。

 

      针对分辨率的不统一,为了达到最佳观赏效果,习惯上设计师会把banner里内容的宽度以及网页中内容的宽度做成1200像素,这样即使是在在不同的分辨率都能够正常显示,在电脑上按跟屏幕的100%宽度显示。而在手机等小屏幕的终端设备上,便不能按照100%显示。手机的屏幕比较窄,如果让banner100%显示,无法看清楚。

 

 

如下图:banner内容比较小,体验度低。(红框中所示)

banner 100%显示的效果

 

 

      如何解决这个问题,佑航前端工程师想出了合理的解决办法:让banner在手机上显示的时候,设置成160%的宽度居中显示,即banner宽度显示成比手机屏幕的1.6倍。这样banner里的内容就可以正常显示到屏幕中间,两侧的部分显示在屏幕外侧。

 

 

如下图:banner中的内容与手机屏幕一样宽,图文清晰,体验度高。(红框中所示)

banner 160%显示的效果

 

 

      以上解决方案由佑航科技技术部提供,未经许可,请不要转载。

上一篇:《响应式网站》应该以“用户体验”为中心 不断进化 适应不同终端显示效果 下一篇:郑州400电话办理之《企业选号需要注意什么》
最新资讯 / NEWS
最新案例 / CASE
×