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