设计Mobile First时如何处理`display:none`?

Posted

技术标签:

【中文标题】设计Mobile First时如何处理`display:none`?【英文标题】:How to deal with `display:none` when designing Mobile First? 【发布时间】:2021-12-23 19:04:44 【问题描述】:

大多数指南建议首先设计移动设备。 IE。为移动设备添加 css-rules 作为默认设置,并将平板电脑/桌面规则放入媒体查询中:

.class1 
   width: 100px


@media only screen and (min-width: 800px) 
  .class1 
     width: 200px
  

那里的论点是移动设计是最简单的设计,而桌面大多数时候只会在其上方添加元素。在我尝试之前,这对我来说是 100% 有意义的。 我的问题是我需要一直在移动设备上隐藏元素。所以代码最终是这样的:

.class2 
   display: none


@media only screen and (min-width: 800px) 
  .class2 
     display: block
  

这很难管理,因为我并不总是需要 display 被阻止,有时它是 flex 或其他东西,可以在完全不同的类中定义,我将它与进行隐藏的类混合。 IE。我总是遇到冲突,结果取决于我将类放入样式表的顺序,而且很容易出错。 由于每个人都推荐移动优先,我相信有办法解决这个问题。 IE。 一种默认隐藏元素的方法(在移动设备上)并在不产生冲突的情况下撤消隐藏。这是什么方法?

如果我只是简单地使用unset 它在元素的所有类中取消设置属性:

    
.flex 
  display: flex;
  background: yellow;


.class2 
  display: none;
  background: red;


.class2 
  display: unset;
<div class="class2 flex">I am not flex</div>
<div class="flex">I am flex</div>

编辑:人们问我为什么要使用两个类: 我这样做是为了与 BEM 分开责任。例如,您混合了两个类,一个负责元素内部的内容(即颜色、字体以及它是 flexbox 还是块)。另一个用于元素在页面上的位置以及是否显示它。决定如何处理整个元素的类不应该知道该元素是使用 flexbox 还是块布局。

【问题讨论】:

我个人使用 JS 来处理我的很多条件渲染。在上面的示例中,由于 CSS 是从上到下读取的,因此您要处理的冲突是 display: unset; 是它知道的唯一事实。 为什么你只使用一个类来隐藏移动设备上的东西?自上而下就是 CSS 的工作方式。将此作为您的优势。 @lupz,这只是一个例子,在很多情况下,您将两个类放在一个元素上。其中一个负责站点布局和隐藏元素,另一个类负责元素内部的内容以及将其定义为 flexbox 的内容。 但是由于 CSS 是从上到下阅读的,所以在一个元素上放置两个类不是问题,而且肯定有它有其优点的情况。问题是您尝试在给定示例中处理两个类中的相同属性,并且由于 CSS 是按照它的方式读取的,后者将覆盖之前的任何其他提及。 我认为这可能会回答您的问题,我同意答案css vs bem 【参考方案1】:

我会做这样的事情。 根据您的需要创建类,比如我希望我的.something 隐藏在手机上,我们将默认隐藏它并给它一个像md-flex 这样的类,在断点md 处变成display-flexmd 可以是你的任何东西当然,也许是medium-flex)。

这样您就不需要将所有内容添加到媒体查询中,只需这几个类来处理显示和可能的位置。将查询留在css文件的底部并在网站的顶部工作== css文件的顶部工作正常。例如

标题之前 标题 标题后 内容 侧边栏 页脚之前 页脚 页脚后

.something 
  display: none;
  background: yellow;

/*this could be md for example*/
@media only screen and (min-width: 900px)
  .md-flex
    display: flex;
  
  .md-inline
    display: inline-block;
  

/*this could be lg for example*/
@media only screen and (min-width: 1280px)
  .lg-block
    display: block;
  
<div class="something md-flex">I am hidden on phone</div>
<div class="something lg-block">I am hidden on phone</div>
<div class="something md-inline">I am hidden on phone</div>

【讨论】:

问题是它并没有真正让你分离职责。例如,使用 BEM,您可以混合两个类,一个负责元素内部的 sutff(即颜色、字体以及它是 flexbox 还是块)。另一个用于元素在页面上的位置以及是否显示它。决定如何处理整个元素的类不应该知道该元素是使用 flexbox 还是块布局。 好吧,你可以创建一个像hidelg-hide 这样的类并给它display: none!important,这样在媒体规则中你放置它就会隐藏它,不管它有什么显示之前,如果媒体规则不再适用。它会回到原来的状态 如果它在媒体查询中 !important 是不必要的,因为该规则将仅通过它们的声明顺序覆盖属性的初始值。 @RamondeVries,您如何使其首先与移动设备一起使用?你默认写display: none!important,而不是在媒体规则中。

以上是关于设计Mobile First时如何处理`display:none`?的主要内容,如果未能解决你的问题,请参考以下文章

从 DataAdapter 拉数据时如何处理 DBNull

应用关闭时如何处理 UNNotificationAction?

执行 Flux.map() 时如何处理错误

制作决策树时如何处理数据

调试时如何处理 ClassNotLoadedException?

使用 ActiveMerchant 时如何处理超时?