小tc学习原地 – 来自内蒙古的盲人站点

AI 分类：: 网络科技

AI 标签：

网址：: https://xtcgzs.cn

```markdown 这个网站是一个WordPress主题，它使用了WP-Blocks插件库来提供各种样式的区块。通过使用`@media`规则，它能够根据设备的屏幕宽度调整区块的大小和布局。以下是一些主要规则的简要介绍： 1. `@media all`: 这个规则将应用于所有的设备，包括桌面、笔记本、平板和手机等。它设置了许多基础的样式，如`align-items`

访问网站

“markdown 这个网站是一个WordPress主题，它使用了WP-Blocks插件库来提供各种样式的区块。通过使用@media`规则，它能够根据设备的屏幕宽度调整区块的大小和布局。以下是一些主要规则的简要介绍：

@media all: 这个规则将应用于所有的设备，包括桌面、笔记本、平板和手机等。它设置了许多基础的样式，如align-items、box-sizing以及display属性。
@media (min-width:782px): 当屏幕宽度超过782像素时，flex-wrap设置为nowrap，这意味着区块会堆叠而不是在一行中显示。
@media (max-width:781px): 当屏幕宽度小于781像素时，flex-basis:100%!important用于保证所有区块在移动设备上具有相同的宽高比。
@media (min-width:782px) and not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:auto!important}: 这个规则确保在782像素以上的设备上，如果区块不是堆叠的，则它的宽度将是100%，即使它是第一个被渲染的区块。
最后一条@media (min-width:782px) and not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1}: 这是为了确保即使在较小的屏幕上，所有区块也会被渲染出来，即使它们没有堆叠。
最后，:where(.wp-block-columns){margin-bottom:1.75em}: 它用于确保在所有类型的区块之间留有足够的边距，以便于内容的阅读和理解。