SCSS 在移动和平板电脑中隐藏 DIV 并在桌面浏览器中显示答案

【问题标题】：SCSS to hide DIV in mobile & tablets and display in desktop browsersSCSS 在移动和平板电脑中隐藏 DIV 并在桌面浏览器中显示
【发布时间】：2021-08-10 14:54:23
【问题描述】：

下面是一个 CSS 类，用于在其中一个页面上呈现带有一些链接的 div。我想在移动视图（移动和平板电脑）中隐藏 div 并仅在桌面浏览器中显示。我正在使用 SCSS。

我应该对 CSS 类进行哪些更改？

.ps-widget__content {
        @extend %list-reset;

        ul {
            border: 1px solid #d1d1d1;

            li {
                border-bottom: 1px solid #d1d1d1;
                a {
                    display: block;
                    padding: 15px 20px;
                    line-height: 20px;
                    font-size: 16px;
                    font-weight: 500;
                    color: $color-heading;
                    text-transform: capitalize;
                    i {
                        margin-right: 10px;
                    }
                    &:hover {
                        background-color: $color-1st;
                        color: #fff;
                    }
                }

                &:last-child {
                    border-bottom: none;
                }

                &.active {
                    background-color: $color-1st;
                    a {
                        color: #fff;
                    }
                }
            }
        }
    }

【问题讨论】：

这能回答你的问题吗？ hide div tag on mobile view only?
这在 scss 中有效吗？
CSS 代码将始终在 SCSS 中工作（反之亦然）
首先，如果你能发布编译后的代码，那将是非常好的。我会举一些例子来回答你可能需要做什么。

标签： css flexbox

【解决方案1】：

您需要使用由 SCSS 编译的媒体查询到以下 CSS 输出或类似内容。

/* for desktop start */
div {
  background-color: green;
}
/* for desktop end */


/* for tablet start */
@media screen and (max-width: 992px) {
  div {
    background-color: blue;
  }
}
/* for tablet end */



/* for mobil start */
@media screen and (max-width: 600px) {
  div {
    background-color: yellow;
  }
}
/* for mobile end */

&lt;div&gt;css automaticaly adjusts rules as view changes&lt;/div&gt;

【讨论】：