网站建设资讯

一文读懂响应式网站设计元素

网站建设 2019-09-25 11:36:31 | 阅读:84
如果客户问:什么是响应式网站?建站公司的销售人员必定会这样回答——可以适应不同屏幕的网站,在手机、PC、平板上都能打开。
如果一个稍微专业的人士问:响应式网站中有哪些元素呢?未必能够回答上来。

响应式网站的特性

响应式网站是由一位研发人员Ethan Marcotte提出的,他认为响应式网站应该具备三个特性:
一是具备灵活的网页布局;
二是具备灵活的图片适应;
三是具备灵活的媒体查询,或者说媒体条件。
下面,我们分别对这三个特性进行解读。

灵活的网页布局

网格这个术语在web设计中越来越模糊。说您的站点必须由一个灵活的网格组成,并不意味着您只能从十几个左右的大型网格系统中进行选择。为列、间距和网页定义自己的参数通常是web设计的最佳解决方案,并且可以像现有的任何系统一样灵活。
事实上,大多数现有的网格系统都限制使用CSS类来定义大小、空间和对齐方式。与编写自己的网格相比,尝试将这些限制叠加到响应性web设计上可能比较棘手,也更耗时。无论是在使用预先制作的网格系统还是创建自定义解决方案,灵活网格系统真正重要的方面在于布局大小和间距的机制。
对于网页设计师来说,这意味着放弃我们喜爱的像素,代之以使用百分比和em(相对度量单位)的网页布局。
当然,这并不意味着我们停止使用图像编辑软件中的像素(比如Photoshop、Fireworks等)。 灵活的网格,可根据浏览器视图的大小更改布局。布局的变化可以通过流畅的动画表现出来。

灵活的图像

使用灵活的网格移动和缩放图像是响应式web设计的另一个关键特性。灵活的图像常常让web设计人员感到头痛。当我们想在更小的浏览设备上为文本内容提供更多的空间时,使用宽度和高度HTML属性来缩小图片的大小,加载巨大的、超大的图片,对于更快的web页面加载时间来说不是一个好的实践。
当然,这一问题的严重程度也取决于站点的图像质量。随着web设计的发展,我们不断地看到包含越来越少不必要的图片和库存照片的站点。也许这是一个很好的时间来评估您的web设计是否需要像现在这样注重图像。
另一种缩放图像的方法是用CSS裁剪它们。CSS overflow属性使我们能够为适应新的显示环境而动态裁剪图像。
我们还可以在服务器上有多个版本的图像,然后根据用户代理使用服务器端或客户端特性检测和DOM操作动态地提供适当大小的版本。

媒体查询

媒体查询也被称之为媒体条件,指的是代码可以根据屏幕大小来改变呈现的方式。
通常,人们认为它们是响应性设计的核心组件,而让灵活的页面组件成为可选的。实际情况是,如果没有一个优良的HTML和CSS基础,媒体查询几乎毫无用处。
媒体查询允许设计人员使用相同的HTML文档构建多个布局,方法是根据用户特性(比如浏览器窗口的大小)选择性地提供样式表。其他参数包括方向(横向或纵向)、屏幕分辨率、颜色(即屏幕可以呈现多少颜色),等等。
媒体查询并不是一种移动解决方案或平板电脑解决方案。相反,媒体查询和响应式设计让我们能够跳出屏幕大小或分辨率的限制,开始构建能够灵活适应所有不同屏幕的网站。