Search code examples
cssfontsmedia-queriesmaterializeresponsive

How to make font sizes responsive in Materialize

I have problem with font size in materialize. if my client device become smaller text sizes is not responsive and they are so small. one solution is to use @media query for every client devies. this is not my solution because materialize itself has media queries and I don't want rewrite them again. is there any way to make texts responsive in materialize? thanks

Solution

  • Perhaps font-size:5vw where 5 would be 5% of the viewport. Or each unit of vw is 1% of the viewport width

    <!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
        <div style="font-size:5vw;text-align:center;">This is Some Responsive Text</div>
    </body>
</html>