Question

我有一个媒体查询，该媒体查询在Safari ios中正常运行，但文本在chrome ios上未调整大小。

我只是试图嵌套该特定h1标签的所有断点。

.page-h1 {
    color: #000;
    text-align: center;
    z-index: 1001;
    position: relative;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;

    padding-top: 20px;  
    @media screen and (min-width: 380px) {
      font-size: 16px !important;
      letter-spacing: 2px;
    }
    @media screen and(min-width: 420px) {
      font-size: 22px !important;
      letter-spacing: 2px;
    }
    @media screen and(min-width: 650px) {
      font-size: 2em;
      letter-spacing: 2px;
    }
    @media screen and(min-width: 980px) {
      font-size: 3em;
      letter-spacing: 2px;
    }
    @media screen and(min-width: 1400px) {
      font-size: 3.5em;
      letter-spacing: 2px;
    }
}

Answer 1

这是一个较小的语法问题。我只需要添加“仅”即可。

.landing-h1 {
  @media only screen and (min-width: 320px) {
      font-size: 25px;
      line-height: 23px;
      margin-top: 48%;
      letter-spacing: 2px;
      word-spacing: 3px;
    }
    @media only screen and (min-width: 40px) {
      font-size: 30px;
      line-height: 40px;
      margin-top: 33%;
      letter-spacing: 2px;
      word-spacing: 5px;
    }
    @media only screen and (min-width: 650px) {
      font-size: 3.3em;
      line-height: 60px;
      margin-top: 24%;
      letter-spacing: 2px;
      word-spacing: 10px;
    }
    @media only screen and (min-width: 960px) {
      font-size: 5em;
      line-height: 95px;
      margin-top: 16%;
      letter-spacing: 2px;
      word-spacing: 15px;
    }
    color: #fccd31;
    text-align: center;
    z-index: 100001;
    position: relative;
    margin-top: 14%;
    font-family: 'Avenir';
    font-size: 5em;
    line-height: 100px;
    text-transform: uppercase;
}

SASS媒体查询问题

1 个答案: