如何設置媒體查詢，並使其工作在移動

Question

我希望在瀏覽器中調整大小以及移動我的字體大小改變。如果我嘗試做它在PC此代碼的工作，但如果我打開我的網站在移動設備上不調整我的文字。

我問爲什麼這個代碼不工作，沒怎麼寫。

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規則順序是主（默認）規則應該優先。他們定義了默認樣式。第二個「部分」包含媒體查詢。因此，你只需要最後兩個類移動到開始的樣式表。在你的情況下，他們會覆蓋媒體查詢定義的所有規則。

這裏是一個解決方案：

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