javascript - How to make font size independent of screen resolution and monitor size? - Stack Overflow

admin管理员组

文章数量:1221274

I am working on one application in which I want to make font size which is independent of screen resolution and screen size. The font size should be same in all resolutions and all screen sizes. How to do it with javascript and css?

I think Pixel per point is hardware related thing so i am not sure javascript and css have access of it.

I tried many alternatives but couldn't find exact solution.

I am working on one application in which I want to make font size which is independent of screen resolution and screen size. The font size should be same in all resolutions and all screen sizes. How to do it with javascript and css?

I think Pixel per point is hardware related thing so i am not sure javascript and css have access of it.

I tried many alternatives but couldn't find exact solution.

• javascript
• html
• css

Share Improve this question Follow edited Feb 11, 2015 at 22:29 Hiren Dhaduk asked Apr 26, 2013 at 21:16 Hiren DhadukHiren Dhaduk 2,78033 gold badges2020 silver badges2121 bronze badges 3

• 3 What should happen if the user connect their computer to a projector? – rjmunro Commented Apr 26, 2013 at 21:20
• I can appreciate the nature of your question, but for accessibility and usability for sight impaired people, this could be a dangerous wire to walk. – Rikon Commented Apr 26, 2013 at 21:42
• @rimunro , I don't have that requirement , In my application I need to maintain font size for only computer monitor . – Hiren Dhaduk Commented Apr 27, 2013 at 10:28

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 4

You can use points (pt), which are based on 1/72 of an inch. This is a unit that traditionally comes from printing. Now, it depends on whether or not the device is configured properly, whether or not this size will be the same from monitor to monitor. It often isn't, but some devices are aware of their physical screen sizes. You can also use inches in, centimeters cm, and millimeters mm.

Use this size, in conjunction with ems, which are relative sizes. That way, the whole site can scale up and down as needed.

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}

There is no good, universal solution. In my opinion, you should just consider that it's not possible. This article was recently published, and suggests a (long-term) solution to that problem. It's long-term because it depends on multiple players (hardware and software manufacturers) to work out.

To quote the author:

It’s ridiculous that we can send robots to Mars yet it’s still virtually impossible to render a glyph on a web page and say with confidence: “If you measure this glyph on your screen with a ruler, it will be exactly 10 millimeters wide.”

Old fashioned points should work.

Example:

<style>
p
{
    font:15pt;
}
</style>

You can't do this because you can't be sure what the true size of the users monitor is, unless you have control of the computers being used.

It's possible for a user to have 2 monitors connected at once in and be set so the same elements of the screen appear at different sizes on each one.

You could use cm and mm:

<span style="font-size: 2cm;">i am big</span>
<span style="font-size: 2mm;">i am tiny</span>

html {font-size: 14px /* in example */}

this does every sibling element of html give an relative size, which means

body { font-size: 100% } /* is 14px now */

as well

div { font-size: 1em } /* should be 14px also */

its also possible to change html font-size with javscript, and all relative sizes should work as expected. with jQuery you could access the body's font-size and set it to some size calculated from screensize. even working would be @media () { your css here } rules for any kind of application in different devices.

var fontsize=14+'px';
jQuery('body').css('font-size',fontsize);

As others have stated, you can't make font size completely independent of screen resolution. What you can do is use media queries to target different screen sizes and resize your font accordingly.

body { font-size: 16px; }
@media screen and (min-width: 600px) {
    body { font-size: 112.5%; }
}
@media screen and (min-width: 800px) {
    body { font-size: 125%; }
}
@media screen and (min-width: 1000px) {
    body { font-size: 137.5%; }
}
@media screen and (min-width: 1200px) {
    body { font-size: 150%; }
}

Those are just example values – you'll have to experiment with your app at various sizes and see what looks best. Trent Walton's site is a good example of this – resize your browser window and see what happens to the text size.

If you size all your fonts using em or rem units, you only need to adjust the body font size and the rest of the values will scale proportionately.

本文标签： javascriptHow to make font size independent of screen resolution and monitor sizeStack Overflow