Как настроить медиа-запросы и заставить их работать на мобильных устройствах

Question

Я хочу, чтобы размер моего шрифта изменялся при изменении размера браузера, а также на мобильном устройстве. Если я попытаюсь сделать это на ПК, этот код работает, но если я открою свой сайт на мобильном телефоне, он не изменит размер моего текста.

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

HTML (о таблице стилей: один для мобильных устройств является "handheld.css"):

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)"> 
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)"> 

handheld.css:

@media only screen and (max-width:320px) { 
    #easy { 
     font-size: 24px; 
    } 
    h2{ 
     font-size: 15px; 
    } 
} 

@media only screen and (min-width:321px) { 
    #easy { 
     font-size: 25px; 
    } 
    h2{ 
     font-size: 16px; 
    } 
} 


@media only screen and (min-width:380px) { 
    #easy { 
     font-size: 26px; 
    } 
    h2{ 
     font-size: 17px; 
    } 
} 

@media only screen and (min-width:420px) { 
    #easy { 
     font-size: 27px; 
    } 
    h2{ 
     font-size: 18px; 
    } 
} 

#easy{ 
    position: relative; 
    left: 40%; 
    font-family: "sweetness", Verdana; 
    top: -63%; 
    margin-left: 3px; 
             fontsize: calc(15px + 3vw);\\this is an alternative to media queries 
} 

h2{ 
    position: relative; 
    color:#fff; 
    text-decoration: none; 
    font-family: "sweetness", Verdana; 
    text-shadow: 
    -0.5px -0.5px 0 #000, 
    0.5px -0.5px 0 #000, 
    -0.5px 0.5px 0 #000, 
    0.5px 0.5px 0 #000; 
    top: 40px; 
             fontsize: calc(15px + 2vw); \\this is an alternative to media queries 

} 

Answer 1

CSS правила для того, что мастер (default) правила должны быть первыми. Они определяют стили по умолчанию. А второй «раздел» содержит медиа-запросы. Таким образом, вам просто нужно переместить последние два класса в начало таблицы стилей. В вашем случае они переопределяют все правила, определенные медиа-запросами.

Вот решение:

#easy{ 
    position: relative; 
    left: 40%; 
    font-family: "sweetness", Verdana; 
    top: -63%; 
    margin-left: 3px; 
             fontsize: calc(15px + 3vw);\\this is an alternative to media queries 
} 

h2{ 
    position: relative; 
    color:#fff; 
    text-decoration: none; 
    font-family: "sweetness", Verdana; 
    text-shadow: 
    -0.5px -0.5px 0 #000, 
    0.5px -0.5px 0 #000, 
    -0.5px 0.5px 0 #000, 
    0.5px 0.5px 0 #000; 
    top: 40px; 
             fontsize: calc(15px + 2vw); \\this is an alternative to media queries 

} 
@media only screen and (max-width:320px) { 
    #easy { 
     font-size: 24px; 
    } 
    h2{ 
     font-size: 15px; 
    } 
} 

@media only screen and (max-width:379px) { 
    #easy { 
     font-size: 25px; 
    } 
    h2{ 
     font-size: 16px; 
    } 
} 


@media only screen and (max-width:419px) { 
    #easy { 
     font-size: 26px; 
    } 
    h2{ 
     font-size: 17px; 
    } 
} 

@media only screen and (min-width:420px) { 
    #easy { 
     font-size: 27px; 
    } 
    h2{ 
     font-size: 18px; 
    } 
}