腾讯设计实战！聊聊响应式WEB布局的概念和实践方法

腾讯设计实战！聊聊响应式WEB布局的概念和实践方法

今年腾讯ISUX人民网停止了统一站，项目过程中有很多技巧和考虑，所以会有明天的文章，涵盖四个圈子，呼应的观点，理论的方法，一些案例，一些观点。

写在前面。

明年上半年，我开始推项目的echo式的《一落千丈》的想法。以人民网的变质和需求为契机，我自动做了一个echo型的页内创意，也制服了制造产品和创意大战的相关同事将其上线下线，不过还好，因为圈子里的各种果实，比如吞噬PC模块和无差别的创意，使得移动浏览不安全，导航兼容性受限等等，上线几个月就悄悄下线了。我不禁深思，我们能否在项目中演绎回声风格？今年，我们从一开始就启动了回声项目。从产品、交互、愿景到开发，所有呼应的项目都到场了，终极流派的页面真的呈现出一边倒的呼应。

视角

Ehmarcotte为一个单独的列表写了一篇介绍性文章:。本文呼应的观点来源于呼应建造的思想，即房间大概会空根据人数和里面的活动而变化。

“最近，一门新的教育科学“响应式建筑”(responsivearchitecture)开始讨论物理空之间停止响应的方法，据参与其中的人说。通过流程，建造者们带着嵌入式机器人，将可延伸和可扩展的材料分开，通过艺术装置，测试可蜿蜒和扩展的墙体结构，以达到根据接近人群的情况而变化的结果。活动传感器与天气控制系统分离，调节人们周围房间的温度和照明条件。曾经有一家公司创造了“智能玻璃工艺”。当室内帮手的数量达到一个不可避免的阈值时，它可以主动变成无光的形式，为人们提供更多的隐私。」

基于网络的附和假设的观点也很相似。现在技术发展缓慢的时期，一直都是快说英雄，装备战的分辨率在突飞猛进。以分类相对清晰的iPhone为例，分辨率和屏幕尺寸多达四种，更不用说厂商们风生水起的安卓机这一类了。因此，为每种设备建立关于特定设备分辨率的独立版本的响应通常是费时费力的。

基于Web的响应的思路应该是页面可以根据用户的设备，包括系统、分辨率、屏幕大小等，停止自我意识的调解。，从而提供更适合当前形势的浏览和 *** 作体验，并对未来现有战争中将要呈现的新装备有必要的适应性。

理论

有观点就要走真理之路。与回显结构类似，网页中也有相应的pivotfruit元素。

弯曲、可收缩和可扩展的墙体结构——可扩展规划；

主动传感器-媒体查询；

气象主系统-网格；

艺术装置-CSS等等。

以上给了我构建文章写作线索的灵感，于是我从最根本的规划之路开始。

可扩展规划

有一种观点是流体规划，这种观点随着网络的兴起而变得流行。它的观点是页面会根据读者窗口的变化而停止变化，网站可以通过流程保护一套代码，从而保证差异性。我在那里夸张的可扩展规划也是基于那个观点，但是现在有各种各样的方法，所以我不得不在页面中夸大规划的可扩展性。

扩展计划的方法有很多，如百分比计划、网格计划等。

结构

从那个框架到道，以一个常见的可扩展三柱计划为例，十种方式不计其数，举几个例子。

方法1:

演示1

方法二:

演示2

方法三:

演示3

方法4:

演示4

方法五:

演示5

方法六:

演示6

方法7:

演示7

方法8:

演示8

方法9:

演示9

除了以上总结，还有很多方法。两列规划的相同原理在此不再赘述。

其他的W3C也有一个网格布局标准，是基于二维网格体系的，可以根据我们的意愿改变页面中的假设。还不如拿Flexbox常见的结果。但仍处于草案阶段。浏览W3C最新的草案内容，介绍网格布局的利用方法及其简单性。

1)网格的定义:

尾部首先在网格项的母容器上定义display:grid。

价值观:

网格–定义块级的网格；

内嵌–定义内嵌级别的网格

2)一些相关观点:

网格线–这是一条带有水平和垂直网格的线，可以通过早上的数字或用户创建的名称来指定。

网格轨迹–指一个网格列之前的区域，而是指两个相邻网格线之前空之间的区域。下图是第二站和第三站之间的网格轨迹。

网格单元–网格单元是指网格中最小的单元。

gridareas–用于显示一个或多个griditems的逻辑空房间。它被四条网格线包围了。

3)网格项目属性

理解了一些基本观点后，您可以了解更多关于相关网格项目属性的信息。

网格-列-开始

网格-列-结束

网格-行-开始

网格-行尾

四个属性中，grid-column-start和grid-row-start表示区域的起始线，grid-column-end和grid-row-end表示区域的结束线。这四个属性都有以下四个可以关联的值。

价值观:

–它可以是一个数字，代表网格线

span–此项将高于网格轨迹提供的数量。

跨度–此项将弯曲到高于下一个手指名称的网格线。

自动主动默认属性

例如:

有代表性的地区是:

除了上面提到的，网格还有更多属性，这些属性使它能够定义网格项的宽度、间隙、内部自适应方法、对齐方法等等。有关更多属性，请参考W3C文档。

4)阅读器支持:

可惜读者的支持已经令人满意，未来得到UA更多的支持才是Grid发展的根本。

框架的拆除和完成只是应对的开始。然而，有一句谚语:良好的开端是成功的一半。回声型从一个好的计划开始。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/779021.html