如何在手机上更改字体大小？

Question

I currently have this html code that shows on desktop. How do I can add the specific mobile code so I can reduce the font size to 35 px on mobile?

 <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

You can use Media Queries like this.

Mobile Viewport sizes varies from 360 x 740, where 360 is width and 740 is height

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

Answer 2

Here is a very simple example of using css units vh and 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

Media queries are your best option for this, just do what ZeevhY Org. posted

Place it at the bottom of your CSS file or bottom of you script tag

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

note: if you have multiple overlapping media queries you might need to use.important on some CSS tags so they apply.