响应式页面设计的布局分辨率

　　什么是响应页面?在过去，网站被设计成在大电脑屏幕上显示。如果你通过手机访问它们，你只能在手掌大小的屏幕上看到更小的页面。还有一些仅针对移动设备的WAP页面，但它们太过简陋，无法提供帮助。随着智能手机、3G、4G、HTML5的普及，越来越多的人使用手机访问网站。为了让用户在手机上看到更合适的布局，并考虑到开发的效率，提出了响应性的概念。可以无缝匹配电脑、平板、手机的前端预览效果技术。

　　响应式设计在不同客户端的效果及解决方案。尽管响应式web站点的应用越来越广泛，但从头开始编写响应式web站点对于程序员来说可能非常复杂，因为它涉及大量的逻辑、判断和调整。你在市场上看到的大多数响应型网站都使用一些开放源代码或框架。最广泛使用的是Bootstrap。

　　它不仅仅是一种用于平板电脑、手机和电脑不同预览的响应式布局。还有另一种——适应性。Adaptive是为不同的客户端提供一套单独的前端代码，并使用一套代码适应不同的客户端的响应。响应适合一些简单的官方网站，显示类页面，显示内容大致相同。然而，适应性应用程序适合网站需要非常不同的客户类型，所以使用一套前端代码将不会工作在所有。

　　1.分段反应规则

　　响应响应的核心对象是浏览器窗口的宽度，而不是设备类型。所以使用响应式网站打开时，通过改变浏览器的宽度，我们可以看到不同的显示效果，我们可以发现每个浏览器的宽度都有一个数值，页面的布局和风格发生显著的变化，而这就是响应式设计最重要的功能——分段显示。

　　响应规则是为页面分配不同的宽度间隔，每个间隔对于不同的场景和设备类型都有自己的表示样式。常见的适应区间大致如下:

　　包括图片截图320-800:手机采集屏幕800-1200:平板电脑或上网本屏幕1200-无限:通用电脑显示器

　　面对布局的分段和风格的变化，我们需要关注发生了什么变化。它可以很容易地简化为三个部分:内容调整、布局调整、风格调整。

　　第一，内容增加或减少。换句话说，一些模块将显示和隐藏在不同的段中。特别是，web端的一些内容会隐藏在小屏幕场景中，因为在小屏幕上显示的内容太多了。

　　第二,布局调整。主要是模块的排列顺序的变化，常见的变化是模块行中列数的变化。

　　第三,风格的变化。换句话说，不同的风格是为不同的人群设计的。设计中最常用的导航栏，iOS的Tabbar或Android的菜单样式将用于最小的分段。

　　因此，页面为不同的段显示不同的结果，也就是说，页面中的组件触发相应类型的更改。每个组件可以应用不同类型的变体，而不需要统一。

　　2.组件的宽度适应

　　分段响应是响应式布局的第一级逻辑。在触发键值之间的间隔内，我们拖动窗口的宽度，并发现组件的宽度会相应地发生变化。这叫做组件宽度适应。

　　组件宽度适应是非常重要的在手机界面的适应性,即完成不同的宽屏幕的手机适配器应用程序逻辑,组件的宽度适应模型主要有两种类型,一是容器的宽度,比例是一个容器,容器是一个更抽象的概念,编组相似的设计软件,它汇集了所有的元素在一个较低的水平,但本身并不实际的内容和风格。在响应规则中，定义了父容器的从属元素的响应方法，使容器在更改时能够合理地显示自身。例如，相对容器之间的空间是一致的，对齐方向是一致的，大小是固定的。此规则的设置是Sketch/Figma/XD中的响应设置函数。你可以得到相同的宽度适应只要你正确地设置它。响应性的规则是，页面组件首先遵循当前部分的布局，并支持在该部分中进行较小的宽度更改和调整。

　　3.响应设计过程

　　响应式设计是一种源自技术的概念，而不是一种简单的设计风格和方法。因此，响应式设计实际上是“面向编程的设计”。

　　接口应该按照实际的编程方法和要求来设计，而不是按照我们想做的来设计。因此，整个过程不仅要从设计者的角度考虑，更要与前端程序员密切沟通。首先，确定响应的宽度间隔和相应的值。我们需要完成相应页面数量的设计，因为正如我们前面所说，在分割的响应规则中会有显著的风格变化，这需要设计师给出设计示例，而不是依靠文字描述或程序员的自由发挥。

　　在完成这些设计之后，我们进一步确定了在相同的间隔内组件的宽度。在大多数情况下，在这个阶段，听写是好的，但如果有太多的规则，你可以写下你想要在标签阶段实现的。

　　在所有的设计稿和规则沟通完毕后，就进入了切割图导出阶段。只是提醒一下，在一些特殊的情况下，响应式背景切断将不同于正常的页面背景切断，所以让前端程序员检查导出的文件尽可能多。在不确定或不清楚的情况下与前端程序员沟通，您将能够快速输出项目。

　　如果功能比较复杂或需要复杂的视觉支持页面，可以选择应用固定页面内容宽度的设计来完成。

上一篇：厦门网站建设过程中的注意事项
下一篇：网站建设运营管理