400-114-0800

企业邮箱经销商/代理商

网建知识

您当前位置 > 首页 > 文章栏目:网建知识

 

弹性化布局在网站设计当中的重要性

发表时间:2014-04-04

 

在过去弹性布局对网站而言几乎是一种奢侈品,当时唯一的弹性设计只是在布局安排和字体设计方面。图片动不动就破坏页面布局,而且即使是那些弹性结构元素,在极端情况下,也会破坏布局——它们可以有几百像素的变化,可一旦从电脑大屏幕切换到上网本时常常就无法调整。现在,金华微网站开发的设计师告诉我们可以做到更大的弹性化。图片尺寸可自动调整,而且我们有应对方案可以保证页面布局不会遭到破坏,尽管在此过程中它们可能会被压缩且难以辨认。虽然这不是一劳永逸的办法,但却给了我们更多的选择。设备横屏竖屏可以瞬间切换,也能满足较大的电脑屏幕切换到iPad。
 
 
 
QQ截图20140404123830.jpg
 
 
 
 
如果浏览器窗口调得过小,图像品质也会相应变得很低,但一定要确保网站名依旧可见、不被裁掉。所以,整个Logo图片其实包括两部分:插图之一是背景图片,图片尺寸不会改变,但在调整中会被裁切;而文字部分则是与窗口成比例地进行缩放。响应式网站设计面临的一个主要问题是图片处理。图片成比例缩放的办法多种多样,且大多都很简单。最流行的方法是使用CSS中的max.width属性,只要没有其他涉及宽度的图片样式覆盖掉这个规则,每张图片都会按照原先的尺寸加载下来,除非可视部分要窄于图片原始宽度。图片最大宽度是100%的屏幕宽度或浏览器宽度,因此当这100%的基数变窄时,图片也会相应变窄。
 
IE浏览器并不支持max.width属性,但可以很好地利用宽度属性:100%宽度值可以轻松解决IE浏览器样式表中的问题。另一个问题是,Windows中一些比较老的浏览器在图片缩放得过小时,可能渲染效果不会太清晰。不过Ethan Marcotte的文章提供了一个Java脚本,可以解决这个问题。虽然上述方法是响应式图片设计的一个很好的修补方法,也是个不错的开始,但金华微网站开发认为图片分辨率和加载时间应该是第一考虑要素。尽管为移动设备调整图片大小易如反掌,但如果图片原始尺寸是按照较大设备而设置的,那么它的加载速度就会变得非常慢,而且会占据不必要的空间。
 

随机推荐查看更多