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

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

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

Я пытаюсь создать адаптивный заголовок, который изменяет размер шрифта для разных размеров устройств, но при использовании экрана @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 ]

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

Вы добавили область просмотра в свой HTML-файл? если нет, то добавьте видовой экран в голову тег 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
0 голосов
/ 03 ноября 2018

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

  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>

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

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

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

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

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

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

@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 */
...