调整所有媒体的文本大小

Question

我知道如何根据屏幕大小调整文本大小，但我一直在研究，但我找不到所有不同的媒体大小，试错法越来越累。我的问题是，有人有资源或知道所有不同的屏幕尺寸吗？

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 14px;
    };
}


@media(min-width:1200px) {
    body {
        font-size: 16px;
    };
}

@media(min-width:2000px) {
    body {
        font-size: 30px;
    };
}

此外，在这种情况下，使用 em 而不是 px 甚至 pc 会更好吗？此解决方案是否与所有浏览器兼容？有没有比 @media(min-width:2000px) 更好的解决方案？

感谢 any/all 反馈

Answer 1

随着时间的推移，设备分辨率的数量只会变得无穷无尽。最好忽略这样一个事实，即会有数百万种不同分辨率的设备，并在可穿戴设备、移动设备、平板电脑、台式机、retina/4k+。

方面对设备分辨率做出一般假设。

如果您确实想要针对特定的设备分辨率，我发现这会有点帮助：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

其中包括以下示例：

Phones and Handhelds

iPhones

Galaxy Phones

HTC Phones

Tablets

iPads

Galaxy Tablets

Nexus Tablets

Kindle Fire

Laptops

Retina

Non-Retina

Wearables

Apple Watch

Moto 360 Watch

如果您想模拟设备分辨率，另一个很好的资源是使用 Chrome DevTools 并使用他们的移动模拟。有关如何执行此操作的具体说明，请参见此处：

https://developer.chrome.com/devtools/docs/device-mode

Answer 2

我的字体大小解决方案（这是一个很好的解决方法）是使用 rem 个单位。

em 单位是相对于父级字体大小的，这导致了复合问题。 rem 单位是相对于根元素或 html 元素的。这意味着我们可以在 html 元素上定义单个字体大小，并将所有 rem 单位定义为该元素的百分比。

@media(min-width:1200px) {
    html { font-size: 12px; }
    body { font-size: 1rem; } /* = 12px */
    p { font-size: 0.8333rem; } /* = 10px */
}

@media(min-width:996px) {
    html { font-size: 14px; }
    body { font-size: 1rem; /* = 14px */ };
    p { font-size: 0.7143rem; } /* = 10px */
}

在 MDN docs and/or see this video 阅读更多信息。

您还可以找到不错的实用程序，例如 rem calculator.

谈到尺寸，我使用了一些预定义的宽度，例如 320, 480, 768, 996。使用液体（按百分比）设计非常容易管理。您将需要更多媒体查询，但仅用于修复。您之前规定的措施要完善（设计可以从320到996完全改变）。对于其余的措施，我们只需要适应它们即可。

我的意思是您不需要了解、管理或控制每个设备措施。

调整所有媒体的文本大小

Re-size text for all media

javascript

css

media-queries