Automatically change font size to prevent text overflow

Question

I'm creating a webpage for mobile phones. I try to show a text in a DIV tag. In small screens some parts of the text won't be shown cause the font size is big for its place(DIV tag). How can I tell the browser to make the text smaller whenever the text is too long to be shown in its place? Can I define percent for text font size? If yes what percentage should I use?

Answer 1

Use @media css tag. And more information about media queries for css

/* Target for all desktops */
body {
     font-size: 16px;
}

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops */
    body {
         font-size: 14px;
    }
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */

    body {
         font-size: 10px; 
    }
}

Answer 2

You could use a percentage, but I would use a media-query instead so that you can choose more accurate specifications for your website for a smaller screen. I suggest you read up on them here - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries