1. David Wu首页
  2. web前端
  3. CSS

网站建设之使用自适应修饰符控制组件中的布局更改

WP网站建设 计划组件的响应行为可能会很棘手,尤其是当组件布局受其内容高度影响时。 例如,让我们考虑一个表组件。您可能决定使用两种不同的布局:一种针对较小的屏幕(状态a布局)进行了优化,另一种针对较大的屏幕(状态b布局)进行了优化。 然后,您需要确定布局更改的断点,并使用媒体查询在CSS中进行设置。 但是,同 WP网站建设

WordPress网站建设

WordPress网站建设

计划组件的响应行为可能会很棘手,尤其是当组件布局受其内容高度影响时。

例如,让我们考虑一个表组件。您可能决定使用两种不同的布局:一种针对较小的屏幕(状态a布局)进行了优化,另一种针对较大的屏幕(状态b布局)进行了优化。

然后,您需要确定布局更改的断点,并使用媒体查询在CSS中进行设置。

但是,同一表组件可以具有两列或二十列。

如果表的列数较少,则可以决定在较小的断点处更改布局:

WordPress网站建设

WordPress网站建设

相反,对于具有更多列或更丰富内容的表,您可能需要稍后对其进行更改,以确保在小屏幕上看起来不会过于拥挤:

WordPress网站建设

WordPress网站建设

理想情况下,您应该找到一个对它们都适用的断点(以及您网站上的所有其他表)。您可以使用一个.table类来定义状态a布局的样式,并使用媒体查询覆盖状态b布局的样式:

<table class="table">
  <!-- table content -->
</table>

<style>
  .table {
    /* state-a layout style */

    @media (min-width: 600px) {
        /* state-b layout style */
    }
  }
</style>

该解决方案可能不是理想的选择,因为您选择的断点是一个折衷方案:您最终可能会发现某些表看起来过于拥挤而另一些表却过于稀疏。即使您找到了适用于今天的表的解决方案,也很可能会与明天的表一起打破。

类修饰符

一种可能的选择是定义响应式类修饰符(共享相同样式但针对不同断点的类),以选择在不同断点处触发布局更改。

如果我们考虑一个带有两个断点(中小)的示例,您将拥有:

.table {
  /* state-a layout style */
}

/* small breakpoint */
@media (min-width: 600px) {
  .table--state-b\@sm {
    /* state-b layout style */
  }
}

/* medium breakpoint */
@media (min-width: 1000px) {
  .table--state-b\@md {
    /* state-b layout style */
  }
}

然后您可以<table>根据其内容将这些修饰符应用于不同的:

<!-- 👇 switch layout at a small breakpoint -->
<table class="table table--state-b@sm"></table>

<!-- 👇 switch layout at a medium breakpoint -->
<table class="table table--state-b@md"></table>

.table--state-b@sm该类中定义的代码与中的代码相同.table--state-b@md。请记住,这两个类用于创建相同的布局。它仅适用于不同的断点。

这种方法有两个主要缺点。第一个是代码的可维护性:如果您需要更改state-b布局,则需要更新两个不同的类(.table--state-b@sm.table--state-b@md)。您可以使用CSS预处理器(例如,使用SASS mixins)解决此问题。

第二个问题是在最终CSS中将state-b的CSS代码重复多次(如果有两个修饰符,则重复两次,但是如果需要其他变体,则可能更多!)。
对所有组件和不同的媒体查询重复此操作,这可能会导致CSS文件大小显着增加。

在研究CodyHouse组件库的表类别时,我们最终使用了一种不同的方法。我们为state-b布局定义了一个类:

.table {
  /* state-a layout style */
}

.table--state-b {
  /* state-b layout style */
}

然后,我们--table-layout.table类内部定义了CSS自定义属性,并使用类修饰符修改了其值:

.table {
  --table-layout: state-a;
}

@media (min-width: 600px) {
  .table--state-b\@sm {
     --table-layout: state-b;
  }
}

@media (min-width: 1000px) {
  .table--state-b\@md {
     --table-layout: state-b;
  }
}

注意,现在使用类修饰符来更改CSS自定义属性的值。没有重复的版式风格。

使用JavaScript,我们可以.table--state-b根据此CSS自定义属性的值检查是否添加或删除类。这将应用适当的布局样式!

var layout = getComputedStyle(table).getPropertyValue('--table-layout');
table.classList.toggle('table--state-b',  layout == 'state-b');

这种技术使我们可以使用单个类(.table--state-b)作为布局样式,而不考虑媒体查询。添加新版本仅需要设置单个CSS自定义属性的值。不涉及代码重复!

在此示例中,我们一直在处理表,但是您可以将此技术应用于响应能力受其内容高度影响的任何组件。

缺点?

这种方法需要JavaScript才能起作用,但这不应该成为问题:如果JS已关闭,我们将提供状态表的状态版本,该版本可以完全访问。

CSS自定义属性支持如何?使用CSS变量可能是最干净,最容易解释的方法。但是,如果您需要支持较旧的浏览器(例如IE 11及更低版本),则可以使用::before伪元素并使用类修饰符更改其内容:

.table::before {
  display: none;
  content: 'state-a';
}

@media (min-width: 600px) {
  .table--state-b\@sm::before {
      content: 'state-b';
  }
}

@media (min-width: 1000px) {
  .table--state-b\@md::before {
      content: 'state-b';
  }
}

在JS中,您可以检查::before内容的值,而不是自定义属性。结果相同,不同的浏览器支持!您可以根据需要决定。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10664

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注