响应网页设计的特征

  响应网页设计的特征

  只有了解了响应网页设计的特征,你才能做出优良的网页设计,那响应网页设计的特征是什么呢?如果你对它还不太了解,那就由广州新希望电脑学校小编慢慢告诉你。

  [灵活的网格]
  网格这个术语对于网页设计来说变得很含糊。说你的网站必须由灵活的网格组成并不意味着你被限制于从几十个现有的很棒的网格系统中选择一个。
  对于列,间距和容器定义自己的参数对于网页设计来说往往是比较好的方案,并且可以与任何现存的系统一样灵活。
  事实上,大多数存在的网格系统都限制于使用CSS类来定义大小,间距和排列。试着附加这些限制到一个响应网页设计上可能会很棘手并且比写自己的布局更浪费时间。
  不管你是使用预置的网格系统还是使用自定义的解决方案,灵活网格系统真正重要的地方是你的布局大小和间距的机制。
  新希望电脑培训学校小编认为这对于网页设计者,意味着要放弃我们心爱的像素,并用百分比和em这样的相对测量单位的网页布局代替它们。
  当然,这不意味着我们不再在我们的图像编辑软件(即Photoshop,Fireworks等)中使用像素。取而代之的是,增加的一个需要简单的数学计算的步骤成为网页设计过程的一部分,因为我们要将我们的像素转化为使用相对单位的网页布局。

  [媒体查询]
  媒体查询对于响应网页设计无疑是令人兴奋(也是对于不熟悉它们的人可怕的)特征。
  人们时常会对媒体查询有错误的理解,把它当作是一个响应设计的核心部分而认为灵活是可有可无的。真实的情况是,如果没有实现包括灵活网格和灵活图片在内的坚实的HTML和CSS基础,媒体查询几乎是没有用的。
  媒体查询允许设计者使用相同的HTML文档创建多个布局,通过基于用户agent特性(如浏览器窗口大小)来选择不同的样式来实现。其它参数有方位,屏幕方案,颜色(即屏幕可以渲染多少种颜色)等等。
  <link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
  <link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />媒体查询没有明确是移动解决方案还是平板方案。取而代之的是,媒体查询和响应设计允许我们跳出屏幕大小或方案来思考,并且开始创建一个灵活的适应所有不同媒介的网站。

  [灵活的图片]
  图片随着我们的灵活的网格移动和缩放是响应网页设计的更一个关键特征。灵活的图片常常让网页设计者有些头疼。加载一个区大的,超出大小的图片,并在更小的浏览设备我们需要更多的空间来显示内容时使用HTML的width和height属性来缩小它不是一个加快网页加载速度的很好实践。
  当然,这个问题有多大取决于图片对你的网站带来的压力有多大。随着网页设计发展,我们看到网站越来越少的使用没有必要的图像和图片库。可能这是一个好机会去评估你的网页设计是否需要像现在这样多的图片。
  另一个缩放图片的方法是使用CSS裁剪它们。CSS的overflow属性(比如说overflow:hidden)让我们能够动态地裁剪图片,并使得周围的空间能够适合新的显示环境。
  我们也可以在服务器上有多个版本的图片,并且根据用户agent等服务器或客户端特征检测技术动态地使用不同大小的版本。
  后我们可以完全隐藏图片,如果我们真的希望关注无图的内容,可以在样式表中将图片设置为display:none。

  正因为响应网页设计有这么好的特征,所以它在网页设计中,才占了一定的地位和市场,所以掌握响应网页设计,是一个网页设计师必须会的。

【关键字】:响应网页设计的特征

更多关注:广州网页设计培训,广州网页设计培训班,广州网页设计培训学校

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章