响应迅速的CSS模式没有媒体查询

>本文探讨了响应式设计技术，以最大程度地减少或消除对媒体查询的依赖。在承认媒体查询的价值的同时，作者认为容器尺寸通常为响应​​调整提供了更有效的基础。 本文介绍了几种技术：

>键技术：

• >带有的flexbox：这种简单的方法允许当限制时空间允许并垂直堆叠时，元素可以水平流动。 理解flex-wrap，和对于有效实施至关重要。flex-grow> flex-shrink flex-basis

“ Fab Four Technique”：
• 利用

  ，，，width和min-width，这种基于断点的宽度切换技术最初是为响应电子邮件而设计的，适应模块到容器尺寸。 本文解释了基本的计算逻辑。max-width calc()

• 浮动图像：

  “ Fab Four Technique”与浮动相结合，以基于容器尺寸在全部宽度和部分宽度之间切换图像。一个变体证明了隐藏元素在较小的容器中。

文本和图像叠加层：
• 一种更复杂的技术使用带有动态填充的负边距和伪元素来创建基于容器宽度的堆叠布置的覆盖效果。

  > >

• >

  >截断列表：此方法使用一个带有的固定高度容器和“更多/少”控件来截断列表，并在超过容器高度时揭示其他项目。overflow: hidden>

• 智能文本对齐：一种通过相对于容器空间的文本长度而动态对齐文本的技术。

• hack：对于某些布局方案的有用技巧。 flex-grow: 9999

  >文章包括代码示例和Codepen演示，以说明每种技术。 它还解决了有关媒体无查询响应式设计的收益，限制和最佳实践的常见问题，包括使用
，视口单元和Flexbox。 作者的结论是，尽管这些技术很有价值，但它们并没有完全取代媒体查询的需求，尤其是为了进行更复杂的响应速度调整。 该文章还提供了有关元素和容器查询的其他资源的链接。

>

calc()

以上是响应迅速的CSS模式没有媒体查询的详细内容。更多信息请关注PHP中文网其他相关文章！