CSS 在每个移动设备上获得正确的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16387400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the right font-size on every mobile device
提问by brent
In my mobile app I use kind of big fonts for example:
在我的移动应用程序中，我使用了一些大字体，例如：
<b style="font-size:100px; font-family:Segoe UI">text</b>
<b style="font-size:100px; font-family:Segoe UI">text</b>
When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.
当我在我的手机上测试它时，它看起来很棒，但在较小的手机上它仍然是相同的尺寸，而且它太大了。
What css settings should I use to get the same size on every phone?
我应该使用什么 css 设置来在每部手机上获得相同的尺寸？
采纳答案by drip
You should be using Media Queries for different device widths.
您应该为不同的设备宽度使用媒体查询。
@media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
@media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
And so on...
等等...
回答by Caner
Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.
媒体查询不起作用。是的，您可以根据屏幕大小使用不同的字体大小（这是像素大小而不是物理大小，因此在具有相同物理大小屏幕但像素密度不同的两个设备上，它的大小不会相同）。您的目标是在具有相同物理屏幕大小的所有设备上拥有相同物理大小的文本，而不管像素密度如何。
Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.
如今，手机在手掌大小的屏幕上安装了超高清分辨率，而旧手机的像素密度要低得多。
There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.
直到最近才解决这个问题。最近 CSS3 添加了对他们所谓的“视口大小排版”的支持。它允许您设置相对于物理屏幕大小的事物的大小。它解释here。
回答by mehmet
Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.
跨设备具有相同/相似大小的文本是可取的，默认情况下您不会得到。这不是因为较小的设备具有更少或更小的物理像素，而是由于这些设备上发生的缩放为了不破坏主要为较大桌面屏幕设计的页面。
For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.
例如，iPhone 5 的物理像素为 1136x640，但使用 chrome 的开发人员工具的设备工具栏，您可能会看到某些元素看起来比这大得多（比如 1300x900）。这是因为浏览器默认应用的缩小缩放。在这种情况下，CSS 像素大小将变得比实际像素大小小得多。想象一下在智能手机中看到桌面大小的页面，只是小得多。
If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):
如果您不希望发生这种情况，则需要明确告诉浏览器不要乱缩放（在页面标题中）：
<meta name="viewport" content="width=device-width, initial-scale=1">
If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.
如果您在不同设备上看到同样大的文本，您可能会遇到类似的情况，只需将其删除即可在智能手机上看到它变小。
回答by Mr. Alien
Use @mediaQueries and set different fonts for different resolutions
使用@media查询并为不同的分辨率设置不同的字体
Example
例子
@media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
回答by Capsule
Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass
或者，您可以查看https://github.com/modularscale/modularscale-sass
It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.
设置大量断点以满足每个移动设备的需求很快就会变得非常复杂，我已经通过模块化规模获得了非常好的结果。
Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.
此外，如果您想要完全可访问/灵活，则在 EM 或 REM 中设置字体大小是一种可行的方法。
