如何在手機上更改字體大小？

Question

我目前有這個在桌面上顯示的 html 代碼。 如何添加特定的移動代碼，以便在移動設備上將字體大小減小到 35 像素？

 <div style="float: left; width: 100%;" class="sapMktBlock"> <h3 class="mobileheader" style="margin: 10px 0px 30px; line-height: 50px; letter-spacing: normal; font-family: Baskerville; font-size: 50px; font-style: normal; font-weight: normal; display: block; color: #000000;important: text-align; center:">Looks Like Something <br />Caught Your Eye</h3> <table class="deviceWidth" style="mso-table-lspace; 0pt: mso-table-rspace; 0pt: mso-line-height-rule; exactly: border-collapse; collapse:important; margin: 0 auto; max-width: 600px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr></tr> </tbody> </table> </div>

Answer 1

您可以像這樣使用媒體查詢。

移動視口大小從 360 x 740 不等，其中 360 是寬度，740 是高度

@media (max-width:360px){
    // Write your code Here, for example
    .my-text{
        font-size:12px;
        color : red;    
    }
}

Answer 2

這是一個使用css單位vh和vw的非常簡單的示例：

 <h1 style="font-size: 7vh;">Becomes bigger on mobile devices</h1> <h1 style="font-size: 7vw;">Becomes smaller on mobile devices</h1>

Answer 3

媒體查詢是您最好的選擇，只需執行 ZeevhY Org 的操作即可。 張貼

將其放在 CSS 文件的底部或腳本標簽的底部

@media (max-width:the max pixel value you want it to apply at(you can also do min)){
    // Write your code Here, for example
    .my-text{
        font-size:12px;
        color : red;    
    }
}

注意：如果您有多個重疊的媒體查詢，您可能需要在某些 CSS 標簽上使用.important，以便它們適用。