设计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-flex
(md
可以是你的任何东西当然,也许是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 还是块布局。 好吧,你可以创建一个像hide
或lg-hide
这样的类并给它display: none!important
,这样在媒体规则中你放置它就会隐藏它,不管它有什么显示之前,如果媒体规则不再适用。它会回到原来的状态
如果它在媒体查询中 !important
是不必要的,因为该规则将仅通过它们的声明顺序覆盖属性的初始值。
@RamondeVries,您如何使其首先与移动设备一起使用?你默认写display: none!important
,而不是在媒体规则中。以上是关于设计Mobile First时如何处理`display:none`?的主要内容,如果未能解决你的问题,请参考以下文章
应用关闭时如何处理 UNNotificationAction?