在桌面和移动设备的页面上设置不同的字体大小

Question

My site uses an out-of-the-box responsive theme: "Lawetique."

The font looks lousy on my desktop PC. The text is thin and narrow. But it looks great on a phone. The narrow typeface suits the vertical orientation, and it's just the right size.

It would look much better on the desktop if it was just larger, but I don't know how to make the font scale larger for PC without making it look cartoonish on mobiles.

I'm OK at CSS but clueless on device control. Any help is sincerely appreciated!

Answer 1

 /* mobile styles first */ body { font-size: 16px; } /* tablet styles */ @media screen and (min-width: 768px) { body { font-size: 20px; } } /* desktop styles */ @media screen and (min-width: 1024px) { body { font-size: 24px; } }