Question

如果我有媒体查询，例如：

@media only screen and (max-width: 499px) {
...
}

做这么多媒体查询，我有多少文件是不好的做法？

例如，我有文件_button.scss：

.button {
...
}

/**
 * Media query only for .button
 */
@media only screen and (max-width: 499px) {
    .button {
        ...
    }
}

在另一个文件中，_input.scss：

.input {
...
}

/**
 * Media query only for .input
 */
@media only screen and (max-width: 499px) {
    .input {
        ...
    }
}

进入最终样式文件style.scss：

@import 'button';
@import 'input;

...

而不是制作单个媒体查询，style.scss：

@import 'button';
@import 'input';

/**
 * Media query for all
 */
@media only screen and (max-width: 499px) {
    .button {
        ...
    }

    .input {
        ...
    }
}

不久前，我接近了响应，所以我有很多疑问（像这样）。感谢任何解决我问题的人。

更新

事实上，问题不仅仅在于（或者不是）不良做法，而且在性能方面也是如此。我会有更好的结果（表现），或者几乎无动于衷？

多个媒体查询声明而不是一个

0 个答案: