in this "display of flowers" era, web designers often need to consider different client browsing experience.
text size is an important part of the user experience. Different resolutions, different display sizes, different DPI, and even different browser settings affect the size of the text to be displayed. Although many browsers now can easily scale pages, it’s always troublesome for users to zoom in again each time, and many users don’t know how to scale pages. It is better to give the user a more considerate default font size based on the user’s resolution. How much is this size suitable for
, 12px, 14px, 15px, 16px, or shouldn’t we use the unit Px,
?The root of the
problem is that all the units on the screen (PX, Pt, and EM) are relative units, and they alone do not determine the actual size of the text. What’s more, the fundamental perception of the size of words is in the eye’s perspective, which depends not only on the physical dimensions of the text, but also on its distance to the human eye.
assumes a text we hope to achieve the physical size, for example set for 17 inch 1280 * 1024 display on the 16px, it can be calculated the height is about 4.32mm, we plan to make the page of text in most displays are relatively close to that size, so in different resolution should show a lot of brands.
the first step: Statistics on the user’s primary resolution and the corresponding screen size.
To convert between physical size and resolution,
first calculates the resolution and the corresponding screen size. The distribution of user resolution can be obtained from the statistics log of the website. Because each resolution settings may correspond to several different screen size, screen size and not through the web, but for now the display market for statistical analysis: for a resolution, statistics screen sizes range from the smallest to the largest, of the mainstream is much (or in the middle of the range of values as the mainstream size). As shown in the following picture –
computer display market (product variety, not exhaustive, data for reference only)
second step: calculate the physical width of each resolution of the mainstream screen size
now displays the ratio of length to width not only has the standard 4:3 screen, 16:10 widescreen, and more irregular proportion, in order to compare between different aspect ratio of the display, unified use of resolution to statistics. The width of the screen (inches) is calculated from the main dimensions and the aspect ratio (assuming the length and width of the pixels are the same), and then converted to metric (mm), which corresponds to the trend of the screen size. Combine again with each resolution