响应式应用程序:哪些字体大小单位为 em vs. px vs. pt vs. percent [英] Responsive App: which font-size units em vs. px vs. pt vs. percent

问题描述

我正在使用 HTML 和 CSS 构建一个针对台式机、平板电脑和手机的响应式应用程序，但我不确定应该使用什么单位字体大小才能使字体适合任何尺寸的屏幕.em、px、pt 和百分比有什么区别?什么是最适合我的选择?

I am building a responsive app targeted to desktop, tablet and mobile phone using HTML and CSS but I am not sure what unit font size should I use that the font fits well in any size screen. What's difference between em, px, pt and percent? What's the best choose for me?

我想听听有关它在台式机、平板电脑和手机的响应式应用程序中的真实体验

I would like to hear real experiences about it in responsive apps for desktop, tablets and mobile phones

如果有任何帮助，我将不胜感激！

I would be thankful for any help!

推荐答案

你可能想看看这篇文章:小链接.

You might want to take a look at this article: little link.

更新:这里有一些关于这如何适用于您的情况的解释:

Update: Here's a tiny bit of explanation about how this applies in your case:

• px:像素是设备显示屏中的一个小方块(通常)，一次只能显示一种颜色.您的屏幕分辨率指定了您的屏幕/显示器由多少像素组成.因此，当您指定:font-size: 12px; 时，您基本上是在告诉浏览器每个字母的高度应为 12 像素(大约 - 不同的字母在高度上略有不同，但相对差异被保留).
• 百分比:font-size: 50%; 将元素的字体大小设置为其父元素字体大小的 50%.
• pt:1pt(点)是 1/72 英寸.设置 font-size: 12pt; 将字符的高度设置为 12/72 英寸(同样，不同的字符略有不同).
• em:em为所选字体中字母'm'的宽度，与百分比基本相同，只是1em为100% 和 1.5em 是 150%.

• px: a pixel is a tiny square (generally) in your device's display that can show only one color at a time. Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high (approximately -- different letters vary in height a bit, but the relative difference is preserved).
• percentages: font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
• pt: 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).
• em: em is the width of the letter 'm' in the selected typeface, basically the same as percentage, except that 1em is 100% and 1.5em is 150%.

所以您的选择可能是 px，因为它会保留文本大小与其他大小元素的逻辑比例.

So your choice would probably be px since it would preserve the logical proportions of text size to other sized elements.

这篇关于响应式应用程序:哪些字体大小单位为 em vs. px vs. pt vs. percent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！