使用媒体查询缩放字体适用于桌面，但不适用于移动设备
[英]scaling font with media query works on desktop but not on mobile
问题描述
I'm using media query to scale the font size as the window shrinks.
随着 window 的缩小，我正在使用media query来缩放字体大小。 I assign width & height values with rem unit to my containers.我用rem单位为我的容器分配宽度和高度值。
When i open dev tools and resize the window everything works as expected.当我打开开发工具并调整 window 的大小时，一切都按预期工作。 But on my mobile phone the design is broken.但是在我的手机上，这个设计坏了。
Tested on Iphone 7 plus and Iphone xr using Safari and chrome.使用 Safari 和 chrome 在 Iphone 7 plus 和 Iphone xr 上进行了测试。
Here is an example:这是一个例子：
html { font-size: 62.5%; } body { height: 100vh; }.grid { display: block; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 30rem); gap: 4rem 10rem; grid-auto-rows: 30rem; justify-content: center; align-content: center; }.box { width: 30rem; height: 30rem; background-color: green; } @media screen and (max-width: 1800px) { html { font-size: 60%; } } @media screen and (max-width: 825px) { html { font-size: 40%; } } @media screen and (max-width: 540px) { html { font-size: 30%; } } @media screen and (max-width: 400px) { html { font-size: 25%; } } @media screen and (max-width: 300px) { html { font-size: 15%; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="styles?css?v=17" /> <title>test</title> </head> <body> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>
2 个解决方案
解决方案1
1 2021-04-19 19:04:22
Calculating the percentages my self and using pixels solved the problem.计算我自己的百分比并使用像素解决了这个问题。 Still not sure why wouldn't it work on mobile while working completely fine on desktop.仍然不确定为什么它不能在移动设备上工作，而在桌面上完全正常工作。
@media screen and (max-width: 1800px) {
html {
font-size: 8px;
}
}
@media screen and (max-width: 825px) {
html {
font-size: 6px;
}
}
@media screen and (max-width: 540px) {
html {
font-size: 5px;
}
}
@media screen and (max-width: 400px) {
html {
font-size: 3px;
}
}
@media screen and (max-width: 300px) {
html {
font-size: 2px;
}
}
解决方案2
-1 2021-04-19 18:04:08
Since you are using rem to specify the sizes maybe this piece of code is causing the issue由于您使用 rem 来指定大小，因此这段代码可能会导致问题
**body {
height: 100vh;
}**
Again I checked your code in Dev Tools everything worked fine not sure, why the design is breaking on a mobile device, you can try specifying the height in rem only.我再次在开发工具中检查了您的代码，一切正常，不确定为什么设计在移动设备上出现问题，您可以尝试仅以 rem 指定高度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.