1

我想max-width在媒体查询中使用时发出警告/错误，并鼓励使用min-width.

我可以警告/错误...

@media (max-width: 50em) {
  padding: 1rem;
}

但是允许...

@media (min-width: 50em) {
  padding: 1rem;
}
4

3 回答 3

2

和规则现在可以在最新的 stylelint 中使用media-feature-name-disallowed-list：media-feature-name-allowed-list

"media-feature-name-disallowed-list": [
  "^max-width",
    {
      "message": "Use min-width for a mobile-first approach (media-feature-name-disallowed-list)",
    },
  ],
},
于 2016-10-08T06:25:10.753 回答
2

您现在应该使用media-feature-name-disallowed-list（https://stylelint.io/user-guide/rules/media-feature-name-disallowed-list）

于 2021-01-25T04:58:59.647 回答
1

在选择器中使用 max-width 时出现错误“media-feature-name-no-unknown”。

允许在我的 .stylelintrc.json 中使用：

    "media-feature-name-no-unknown": [
      {
        "ignoreMediaFeatureNames": [
          "max-width"
        ]
      }
    ]

有效用法示例（样式化组件）：


const StyledSectionDrawer = styled.div`
  @media screen and (max-width: ${(props) => props.breakpoint}px) {
    margin-top: ${standardNavHeight}px;
  }
  @media screen and (min-width: ${(props) => props.breakpoint}px) {
    margin-top: ${(props) => (props.scrolled ? standardNavHeight : props.navHeight)}px;
  }
`;

通过https://stylelint.io/user-guide/rules/list/media-feature-name-no-unknown/

于 2021-07-15T15:08:35.993 回答