[英]Responsive App: which font-size units em vs. px vs. pt vs. percent
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.我正在使用 HTML 和 CSS 构建一个针对台式机、平板电脑和手机的响应式应用程序,但我不确定应该使用什么单位字体大小才能使字体适合任何尺寸的屏幕。 What's difference between em, px, pt and percent? em、px、pt 和百分比有什么区别? 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:更新:这里有一些关于这如何适用于您的情况的解释:
font-size: 12px;
所以当你指定: 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). ,您基本上是在告诉浏览器每个字母应该是 12 像素高(大约 - 不同字母的高度略有不同,但保留了相对差异)。font-size: 50%;
百分比: font-size: 50%;
sets the font size of your element to 50% of the font size of its parent element.将元素的字体大小设置为其父元素字体大小的 50%。1pt
(point) is 1 / 72 of an inch. pt : 1pt
(点)是 1 / 72 英寸。 Setting font-size: 12pt;
设置font-size: 12pt;
sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).将字符的高度设置为 12 / 72 英寸(同样,不同的字符略有不同)。1em
is 100%
and 1.5em
is 150%
. em : em 是所选字体中字母 'm' 的宽度,与百分比基本相同,只是1em
为100%
, 1.5em
为150%
。 So your choice would probably be px
since it would preserve the logical proportions of text size to other sized elements.因此,您的选择可能是px
因为它会保留文本大小与其他大小元素的逻辑比例。
Various dimensions are各种尺寸是
see kyleschaeffer.com/.... and css-tricks.com/....参见kyleschaeffer.com/....和css-tricks.com/....
But to achieve responsive typo look at https://stackoverflow.com/a/21981859/406659但要实现响应式错字,请查看https://stackoverflow.com/a/21981859/406659
It seems to me the best will be the incoming rem
and vmin
units as documented here .在我看来,最好的将是传入的rem
和vmin
单位,如此处所述。
To cope with older browser you may want to have some CSS fall backs defined something like:为了应对较旧的浏览器,您可能需要定义一些 CSS 回退,例如:
p, li
{
font-size: 12px;
font-size: 0.75rem;
}
or要么
p, li
{
font-size: 12px; /* old */
font-size: 1.2vm; /* IE9 */
font-size: 1.2vmin;
}
(credit to Craig Butler ) (归功于克雷格巴特勒)
Try using a mix of px, em, and rem.尝试混合使用 px、em 和 rem。
Chris Coyier explains in this post that using px for your document, rem for your modules (ie. sections of your page), and em for text elements within your modules, the page will scale cleanly. Chris Coyier 在这篇文章中解释说,将 px 用于文档,rem 用于模块(即页面的部分),以及 em 用于模块内的文本元素,页面将可以清晰地缩放。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.