Question

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

自定义-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;
        }
    }
}

我尝试将宽度介于1025px和1280像素之间的蓝色背景色，并且在ChromeVersión64.0.3282.186

中无效

Answer 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; }

这将有效。

为什么@ custom-media不会在sass中应用相应的样式

1 个答案: