为什么@custom-media 没有在 sass 中应用各自的样式答案

【问题标题】：Why @ custom-media does not apply the respective styles in sass为什么@custom-media 没有在 sass 中应用各自的样式
【发布时间】：2018-08-25 00:46:30
【问题描述】：

我正在尝试使用 CSS 网格和新规范 CSS level 4 的响应部分进行基本布局，但是在编译 sass 的内容时它对我不起作用，我有什么失败吗？我错过了任何细节吗？

custom-media.scss

*{ margin: 0 ; padding: 0}

@custom-media --phone  ( 320px < width < 480px); 
@custom-media --tablets (481px < width  < 767px);
@custom-media --ipad-landscape  (768px < width < 1024px) and (orientation: landscape);
@custom-media --ipad-normal  (768px < width < 1024px);
@custom-media --desktop  (1025px < width  < 1280px);
@custom-media --large  (width > 1281px);

app.scss

@import 'custom-media';

/**
 *
 * Login Page
 *
 */
 .container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-row: 1fr;

    .presentation{
        background:#CB3BBF;
    }

    .loginsection{

    }

    @media  (--desktop) {
        .container {
            grid-template-columns: 1fr; 
        }

        .presentation{
            background:blue;
        }
    }
}

我尝试将蓝色背景颜色设置为 1025 像素到 1280 像素之间的宽度，但它在 Chrome 版本 64.0.3282.186 中不起作用

【问题讨论】：

你安装github.com/postcss/postcss-custom-media了吗？

标签： html css sass media-queries

【解决方案1】：

你可以使用

@mixin responsive($size) { @if $size == large { /* 1920px / @media (max-width: 120em) { @content; } } @if $size == small { / 1199px */ @media (max-width: 74.938em) { @content; } } } @include responsive(large){ font-size: 42px; } @include responsive(small){ font-size: 22px; }

这会起作用。

【讨论】：

【解决方案2】：

截至目前（2021 年 12 月），似乎在规范中，@custom-media 尚未在任何地方实现。 caniuse 和 MDN 都不知道 @custom-media。

【讨论】：