Почему мой отзывчивый CSS не работает в этом коде? - PullRequest
Новая
       3

Почему мой отзывчивый CSS не работает в этом коде?

1 голос
/ 07 февраля 2020

У меня есть следующий HTML код: 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

    <body style="background-image:url('images/background-website-web-blue.jpg');background-size: 100% 100%;background-attachment:fixed;">
    <div class="content1" style="background-color: rgb(52,129,162,0.8); box-shadow: 10px 10px 10px rgba(0,0,0,0.8);" >
        <div class="container" style="text-align:center;">
            <div class="jumbotron" style="background-color: transparent;"></div>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 700;" >dockdockdock</p>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 25px; font-weight: 400; font-style: italic;">dockdcokdock</p> 
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 400; line-height: 52px;" >DUck duck duck duck <i style="color: red; font-weight: 700;">60 Hari</i> Bergabung Di Ecourse Ini</p>
                <br><br><br>
            </div>
        </div>
    </div>
  </body>
</html>

и CSS: 

@media only screen and (max-width: 600px) {
  p{
    font-size:5px;
  }
}

Но почему теги <p> не изменяются в размере 5 пикселей, когда носитель 600px или меньше?

А если я поставлю теги <p> выше <div>, он будет работать

Ответы [ 3 ]

2 голосов
/ 07 февраля 2020

Поскольку специфичность встроенного стиля оценивается намного выше, чем просто CSS

Если вы хотите, чтобы ваш css для мобильных устройств работал с заданным HTML, вам нужно добавить !important как 

@media only screen and (max-width: 600px) {
  p {
    font-size: 5px !important;
  }
}

Тогда это сработает.

Но, честно говоря, мы никогда не должны использовать !important. Это может быть легко достигнуто в этом случае, просто переместите все ваши встроенные стили из HTML в начало CSS файла

Рабочий пример с !important https://jsfiddle.net/nvzupxb0/

Рабочий пример только с CSS https://jsfiddle.net/nvzupxb0/2/

Замечания по решению CSS only

  1. добавить некоторые классы к тегам <p>, потому что ваша разметка не позволила мне использовать :nth-child() псевдо-селекторы
  2. удалил теги <br> из последнего (.third) p-тега, потому что могут возникать линейные тормоза достигается с помощью CSS padding-bottom. давая преимущество изменения высоты отступа с помощью CSS для мобильных устройств!
1 голос
/ 07 февраля 2020

Просто переместите свой встроенный css, который указан в теге p, во внешний файл css, или вы можете написать! Важно, как это - 

@media only screen and (max-width: 600px) {
    p{
      font-size:5px !important;
    }
  }
0 голосов
/ 07 февраля 2020

Вы можете создать медиа-запрос и сделать абзац с 5px! Важным. 

@media (max-width: 600px) {
p{
  font-size: 5px !important;
}

}

...