Responsive Printing House

Question

I read various articles about responsive printing, but did not find good practice for adoption. If I need to optimize my webapp for these resolutions with font size for each in the graphic source:

320x480 → 12px

480x800 → 20px

540x960 → 26px

720x1280 → 26px

after my reading, I put this in the css file:

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 

then with Ethan Marcott's formula, I calculated my first font size:

 body{font-size: 0.75em;/*12px/16px */} 

then using mediaqueries I added the font size for the html attribute:

 /* ===== == = === 30em (480px) === = == ===== */ @media only screen and (min-width : 30em) { body{font-size: 125%;}/*20px*/ } /* ===== == = === 37.5em (600px) === = == ===== */ @media only screen and (min-width: 37.5em) { body{font-size: 163%;}/*26px*/ } 

Is it good practice to adapt my font to different resolutions? Do you have any good practical examples where I can find this information?

Thanks in advance!

Answer 1

Structurally, this is how I do it. Not sure if I will use percentages, although in your mq, I will probably continue to work with em. Here is a great px calculator in em: http://pxtoem.com/