关键词: 网站 权重 空间 方法 网络

新闻中心

您当前位置:互易中国资讯前沿 >> 设计在线 >> 网页设计 >> 浏览文章

理解响应网页设计元素

2011-4-2 14:10:34 ChinaZ 佚名 【字体:

    虚拟主机

  • 国内、海外多家顶级机房
  • 可免备案

    云享主机

  • 不限空间大小/CPU/IIS
  • 让你感受云的力量

    智能建站

  • 功能全面升级,海量模板
  • 会打字就会建站

点击浏览下一页

响应网页设计目前在网页设计中无疑是一个热门话题。从某种程度上来说,响应网页设计概念的普及是非常应该的,因为用户以越来越多样化的方式访问网站。iPad,iPhone,Android移动设备,桌面,笔记本——现在我们的网页设计必须在众多方式下使用。

让我们来了解响应网页设计的含意和塬则。

响应网页设计的关键特征

认为网页设计是“响应”的,需要有叁个关键牲。网页设计师和开发者Ethan Marcotte——提出响应网页设计的人——将这些特征描述如下:

1.网站必须以灵活的网格为基础构建。

2.设计中包含的图片也必须是灵活的。

3.在不同的环境中必须可以通过媒体查询拥有不同的视图。

点击浏览下一页

CSS-Tricks根据浏览器窗口的大小改变它的网页布局。

重要的是要注意所有这叁个特征都必须实现,以使真正的响应网页设计生效。

任何缺少这些特征的设计都不是一个响应网页设计。它是不可改变的。

接下来,让我们来深入研究这叁个特征,以更好的理解它们如何融合并给我们带来完整地响应网页设计。

灵活的网格

网格这个术语对于网页设计来说变得很含煳。说你的网站必须由灵活的网格组成并不意味着你被限制于从几十个现有的很棒的网格系统中选择一个。

对于列,间距和容器定义自己的参数对于网页设计来说往往是最好的方案,并且可以与任何现存的系统一样灵活。

事实上,大多数存在的网格系统都限制于使用CSS类来定义大小,间距和排列。试着附加这些限制到一个响应网页设计上可能会很棘手并且比写自己的布局更浪费时间。

不管你是使用预置的网格系统还是使用自定义的解决方案,灵活网格系统真正重要的地方是你的布局大小和间距的机制。

对于网页设计者,这意味着要放弃我们心爱的像素,并用百分比和em这样的相对测量单位的网页布局代替它们。

当然,这不意味着我们不再在我们的图像编辑软件(即Photoshop,Fireworks等)中使用像素。取而代之的是,增加的一个需要简单的数学计算的步骤成为网页设计过程的一部分,因为我们要将我们的像素转化为使用相对单位的网页布局。

点击浏览下一页

St Paul’s School网站使用了灵活的网格布局,它可以根据浏览器的窗口大小改变布局,布局的改变以平滑的动画来展示。

灵活的图片

图片随着我们的灵活的网格移动和缩放是响应网页设计的更一个关键特征。灵活的图片常常让网页设计者有些头疼。加载一个区大的,超出大小的图片,并在更小的浏览设备我们需要更多的空间来显示内容时使用HTML的width和height属性来缩小它不是一个加快网页加载速度的很好实践。

当然,这个问题有多大取决于图片对你的网站带来的压力有多大。随着网页设计发展,我们看到网站越来越少的使用没有必要的图像和图片库。可能这是一个好机会去评估你的网页设计是否需要像现在这样多的图片。

另一个缩放图片的方法是使用CSS裁剪它们。CSS的overflow属性(比如说overflow:hidden)让我们能够动态地裁剪图片,并使得周围的空间能够适合新的显示环境。

我们也可以在服务器上有多个版本的图片,并且根据用户agent等服务器或客户端特征检测技术动态地使用不同大小的版本。

最后我们可以完全隐藏图片,如果我们真的希望关注无图的内容,可以在样式表中将图片设置为display:none。

点击浏览下一页

Think Vitamin中的图片元素是灵活的,它们根据浏览器窗口大小缩放。


以上内容由 互易中国 搜集整理,如转载请注明原文出处,并保留这一部分内容。

 互易中国(http://www.53dns.com)是全国十大域名主机服务商,成立于2003年,八年来,累积已为五十余万用户提供优质的产品和服务。互易中国专业经营域名注册,虚拟主机,智能建站,云享主机,VPS,企业邮箱,服务器租用等业务。

互易中国网址导航: 域名注册 虚拟主机 智能建站 企业邮箱 服务器租用 VPS主机

相关阅读:

  • 本周排行
  • 本月排行