发布时间：2020-3-17 分类： 行业资讯
写在前面
去年上半年，我开始推广该项目的响应式设计。借助官方代购源码网站优化需求的机会，我主动做了响应式页面设计，并且说服了产品，设计和开发的相关同事在线实现它，但不幸的是，由于各种原因，例如，PC模块，无差异设计使得移动终端读取不良，导航兼容性受限等，几个月后它就会悄然脱机。如果项目有所回应，我不禁要反思一下？今年年初，全站响应项目重新启动。从产品，交互，愿景到开发，响应项目中涉及的所有角色以及门户页面都是完全响应的。 。在项目过程中存在技术存款，也有很多想法。还提供以下文本。文章的内容围绕四个方面，即响应概念，实践方法，一些案例和一些观察。
概念
Ehan Marcotte为A List Apart< Responsive Web Design>撰写了一篇介绍性文章。响应式概念源于响应式建筑设计，其中房间或空间根据人员的数量和流量而变化。
[最近出现的新兴学科，响应式架构，正在开始探索物理空间对流入其中的人们做出反应的方式。通过将嵌入式机器人与可拉伸材料相结合，建筑师们尝试了艺术装置和灵活的，伸缩的和扩展的墙壁结构，以实现接近人群的变化。运动传感器与气候控制系统相结合，可调节人们周围房间的温度以及环境照明。已经有一家公司创造了“智能玻璃技术”，当室内数量达到一定的门槛时，它就会自动变得不透明，为人们提供更多的隐私保护。 ]
Web响应式设计的概念非常相似。在当今技术发展迅速的时代，英雄，设备和解决方案一直在迅速变化，日新月异。例如，具有相对清晰分类的iPhone具有多达4种分辨率和屏幕尺寸，更不用说蓬勃发展的制造商。 Android机器领域。因此，为每个设备或特定设备分辨率开发单独的版本是非常耗时且劳动密集的。
Web响应式设计的概念应该是页面可以根据用户的设备环境自发调整，包括系统，分辨率，屏幕大小和其他因素，提供更适合当前环境的阅读和操作体验。未来出现的新设备具有一定的适应性。
实践
有了这个概念，我们必须谈谈实施的方法。与响应式架构类似，网页也有关键因素。
灵活，伸缩，延伸的墙壁结构——可扩展的布局;
运动传感器—— MediaQuery;
气候控制系统—— grid;
艺术装置—— css等。
上面给了我写文章背景的灵感，所以我从最基本的布局开始。
可扩展的布局
当网络早期启动时，流体布局的概念占了上风。概念是页面根据浏览器窗口的变化而变化，并且站点可以通过维护一组代码来维持一致的设计。我在这里强调的可扩展布局也是基于这个概念，但是当前的方法是多种多样的，因此应该强调页面布局的可伸缩性。
有许多方法可以扩展布局，例如常见的百分比布局和不是标准的网格布局。
帧
从这个框架，在一个通用的可扩展三列布局中有许多方法。这里有一些例子。
方法1：
demo1的
方法2：
DEMO2
方法3：
Demo3
方法4：
Demo4
方法5：
Demo5
方法6：
Demo6
方法7：
Demo7
方法8：
Demo8
方法9：
Demo9
除上述摘要外，还有越来越多的方法。两列的布局不会重复。
此外，W3C还有一个网格布局规范，它基于二维网格系统，可以根据我们的意愿轻松改变页面的设计。它适用于Flexbox。但它仍处于起草阶段。看一下W3C的最新草案，简要介绍了Grid Layout的用法和原理。
1）定义网格：
首先在网格项外部的父容器上定义显示:网格。
。值：
网格–定义块级栅格;
内联–定义内联级栅格
2）一些相关的概念：
网格线–是一条水平和垂直划分网格的线。它可以按数字顺序指定，也可以使用用户定义的名称指定。
网格跟踪–指的是线之前的网格列或区域，换句话说，是两个相邻网格线之前的空间。下图是第二行和第三行之间的网格轨迹。
网格单元–网格单元是指网格中的最小单元。
网格区域–是用于表示一个或多个网格项的逻辑空间。它被四条网格线包围。
3）网格项属性
在了解了一些基本概念之后，您可以了解相关的网格项属性。
格列起动
格列端
网格行起动
网格行端
在这四个属性中，grid-column-start和grid-row-start表示区域的起始行，grid-column-end和grid-row-end表示该区域的结束行。这四个属性有以下四个值可供选择。
值：
&ndash的;可以是表示网格线的数字
跨度&ndash的;这将跨越提供的网格轨道数
跨度&ndash的;这将跨越网格线，直到达到下一个指定名称
自动–自动或默认属性
例如：
代表的区域是：
除了上述之外，网格还具有更多属性，可以定义网格项的宽度和高度，间隙，内部自适应方式，对齐方式等。更多属性可以参考W3C文档。
4）浏览器支持：
遗憾的是，浏览器支持并不令人满意，未来在UA上获得更多支持是Grid开发的基础。
框架是构建的，它只是响应的开始。但是这句话有一种说法：好的开始已经完成了一半。响应性始于良好的布局。
原始链接: ISUX
