I'm new to web design. I have a decent understanding of CSS/HTML, but I'm conflicted on how to style fonts to fit mobile devices.
我对网页设计很陌生。我对CSS/HTML有很好的理解，但在如何设计字体以适应移动设备上，我有些矛盾。
Currently I use px to make my fonts larger or smaller on my web pages. However, doing this will make my fonts look very small on high px/inch devices.
目前我使用px使我的字体在我的网页上更大或更小。然而，这样做会使我的字体在高像素/英寸的设备上显得非常小。
How can I make my fonts appear legible on these high resolution screens without making them look super small?
我怎样才能使我的字体在这些高分辨率的屏幕上看起来清晰可辨，而不让它们看起来超级小?
For example:
例如:
.thisClass{
font-size:12px;
}
is what I am used to using. On my laptop it looks fine, but I have no idea how it looks on tablets because I don't own one D:
这是我习惯用的。在我的笔记本电脑上，它看起来不错，但我不知道它在平板电脑上的样子，因为我没有一个D:
2 个解决方案
#1
5
Check this out from CSS3...
从CSS3中查看这个……
- 1vw = 1% of viewport width
- 1vw =视场宽度的1%
- 1vh = 1% of viewport height
- 1vh =视场高度的1%
- 1vmin = 1vw or 1vh, whichever is smaller
- 1vmin = 1vw或1vh，以较小的为准
-
1vmax = 1vw or 1vh, whichever is larger
1vmax = 1vw或1vh，哪个更大。
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
h1 {字体大小:5.9大众;{font- family:宋体;{字体大小:2vmin;}
#2
1
According to this link https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites, font-size:medium; is a flexible solution, and many people there have experimented for optimal size if you know more about the target device.
根据此链接，https://ux.stackexchange.com/questions/7820/font-size-for mobile-sites, font-size:medium;是一种灵活的解决方案，如果您对目标设备有更多的了解，许多人已经尝试过优化尺寸。
By the by, this isn't the best way to solve this problem, but since you say you're new to mobile web design I'd also like to point you towards the @media css selector https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries It lets you set different styles depending on things like device type, screen size, phone orientation... I imagine it might come in handy in your future :)
顺便说一下，这不是解决这个问题的最佳方法，但是既然你说你是移动web设计的新手，我也想让你指向@media css选择器https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries它允许你根据设备类型、屏幕大小、手机方向等设置不同的样式。我想它可能会在你的将来派上用场。
#1
5
Check this out from CSS3...
从CSS3中查看这个……
- 1vw = 1% of viewport width
- 1vw =视场宽度的1%
- 1vh = 1% of viewport height
- 1vh =视场高度的1%
- 1vmin = 1vw or 1vh, whichever is smaller
- 1vmin = 1vw或1vh，以较小的为准
-
1vmax = 1vw or 1vh, whichever is larger
1vmax = 1vw或1vh，哪个更大。
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
h1 {字体大小:5.9大众;{font- family:宋体;{字体大小:2vmin;}
#2
1
According to this link https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites, font-size:medium; is a flexible solution, and many people there have experimented for optimal size if you know more about the target device.
根据此链接，https://ux.stackexchange.com/questions/7820/font-size-for mobile-sites, font-size:medium;是一种灵活的解决方案，如果您对目标设备有更多的了解，许多人已经尝试过优化尺寸。
By the by, this isn't the best way to solve this problem, but since you say you're new to mobile web design I'd also like to point you towards the @media css selector https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries It lets you set different styles depending on things like device type, screen size, phone orientation... I imagine it might come in handy in your future :)
顺便说一下，这不是解决这个问题的最佳方法，但是既然你说你是移动web设计的新手，我也想让你指向@media css选择器https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries它允许你根据设备类型、屏幕大小、手机方向等设置不同的样式。我想它可能会在你的将来派上用场。