SASS медиа-вопрос - PullRequest
Новая
       6

SASS медиа-вопрос

0 голосов
/ 04 ноября 2018

У меня есть медиа-запрос, который работает как следует в 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;
    }
}

1 Ответ

0 голосов
/ 05 ноября 2018

Это была незначительная синтаксическая проблема. Мне просто нужно добавить «только». 

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