Many users increase the size of the text on a webpage in order to be able to read it clearly. This is either achieved via a dedicated control on the webpage, or by using the browser controls. This is particularly the case for people who are partially sighted or have low vision, who may resize webpage text by up to 200%. Webpages need to be able to accommodate such resizing and scale accordingly without "breaking" or forcing the user to scroll horizontally.
Use your browser's built-in controls to resize the text and determine whether the layout breaks at a certain point or if some controls become obscured.
To address this problem, define the font sizes in the CSS using relative units of measurement, such as ems (em) or percentage (%). An em is a relative unit of measurement. It's origin relates to the captial 'M' and it is relative to the font size of the parent element. The font size of the parent element can be defined in CSS but can also be relative to the default font size within the browser. This is usually ~ 16px. If this is the case, then 1em = 16px. You can make text content larger and/or smaller than this size by defining sizes in larger and smaller values of em. So 0.5em would be ~ 8 px and 1.5 em would be ~ 24px in size.
No example is available.