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

厦门网站建设 计划组件的响应行为可能会很棘手,尤其是当组件布局受其内容高度影响时。 例如,让我们考虑一个表组件。您可能决定使用两种不同的布局:一种针对较小的屏幕(状态a布局)进行了优化,另一种针对较大的屏幕(状态b布局)进行了优化。 然后,您需要确定布局更改的断点,并使用媒体查询在CSS中进行设置。 但是,同一表组件可以具有两列或二十列。 如果表的列数较少,则可以决定在较小的断点处更改布局: 厦门网站建设 相反,对于具有更多列或更丰富内容的表,您可能需要稍后对其进行更改,以确保在小屏幕上看起来不会过于拥挤: 厦门网站建设 理想情况下,您应该找到一个对它们都适用的断点(以及您网站上的所有其他表)。您可以使用一个.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内容的值,而不是自定义属性。结果相同,不同的浏览器支持!您可以根据需要决定。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设之使用自适应修饰符控制组件中的布局更改
分享到:
赞(0)
广告位820*80