@media ничего не меняет, когда максимальная ширина меньше?

Я пытаюсь создать адаптивный заголовок, который изменяет размер шрифта для разных размеров устройств, но при использовании экрана @Media и (max-width: X px) он не будет вносить никаких изменений, которые я применяю к нему. Мой код

@media screen and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
 #header h1
 {
  display: none;
 }
    #nav a 
 {
    float: none;
    display: block;
    text-align: center;
   }
  #nav-right 
 {
    float: none;
   }
  #nav:before 
 {
    display: block;
    position: absolute;
    top: 10px;
 right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
 }
 #nav:after
 {
 position: absolute;
   right: 0;
   top: -15px;
  height: 60px;
 }
}
@media screen and (max-width: 509px)
{
 #nav
 {
  font-size: 16px; 
 }
}

@media screen and (max-width: 409px)
{
 #nav
 {
  font-size: 8px;
 }
}

Я просто хочу, чтобы он изменил размер шрифта, но он не работает по какой-либо причине, пожалуйста, помогите Спасибо W.

Источник

3 ответа

Решение

Нужно знать, где один начинается, а другой заканчивается - это делается одним пикселем для плавного адаптивного макета. Обычно мне легче работать с небольшого размера, так как маленький размер начинается с нуля пикселей в ширину, поэтому минимальной ширины не нужно быть упомянутым

Я собираюсь переупорядочить ваши медиа-запросы с узким на широкий экран:

@media screen and (max-width: 409px)
{
 #nav
 {
  font-size: 8px;
 }
}
   
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */

/* notice this is 1px bigger than the previous max-width */

@media screen and (min-width: 410px) and (max-width: 509px)
{
 #nav
 {
  font-size: 16px; 
 }
}

/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */

/* notice this is 1px bigger than the previous max-width */

 @media screen and (min-width: 510px) and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
 #header h1
 {
  display: none;
 }
    #nav a 
 {
    float: none;
    display: block;
    text-align: center;
   }
  #nav-right 
 {
    float: none;
   }
  #nav:before 
 {
    display: block;
    position: absolute;
    top: 10px;
 right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
 }
 #nav:after
 {
 position: absolute;
   right: 0;
   top: -15px;
  height: 60px;
 }
}

/* and there you have it */

Источник

Вы добавили область просмотра в свой HTML-файл? если нет, то добавьте viewport в head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Источник

Вот решение вашей проблемы, чтобы применить медиа-запрос при изменении размера экрана. Я написал пример кода, чтобы объяснить формат применения медиазапроса для экрана разных размеров:

  body {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
     }

     .footer_class{
        position: fixed;
        bottom: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

     .header_class {
        position: fixed;
        top: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

    /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) {

        .title {
           font-size:14px;
        }

    }

    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) { 

        .title {
           font-size:20px;
        }

    }
<DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<body>
    <Header class="header_class">
     <h1 class="title">Header Section</h1>
    </Header>
    <article>
       <p>Content Section</p>
    </article>

    <footer class="footer_class">
       <h1 class="title">Footer Section</h1> 
    </footer>
</body>
</html>

Давайте разберем ваш медиазапрос на две части: экран @media only Это означает, что мы будем применять стили css к устройству с экраном. Ключевое слово используется здесь только для того, чтобы скрыть таблицы стилей от старых браузеров от просмотра таблицы стилей телефона.

и (min-device-width: 320px) и (max-device-width: 568px) Это вполне очевидно, так как это означает, что указанный CSS применяется только тогда, когда устройство имеет размер экрана с минимальным 320 пикселей и максимальным 480px по ширине измерения,

Я надеюсь, что это поможет вам решить вашу проблему.

Источник
Другие вопросы по тегам