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)更好的解决方案？

感谢您提供任何/所有反馈

Answer 1

随着时间的推移，设备分辨率的数量将变为无限。最好忽略这样一个事实：将有数百万台具有不同分辨率的设备，并根据可穿戴设备，移动设备，平板电脑，台式机，视网膜/ 4k +对设备分辨率做出一般性假设。

如果您确实希望定位特定的设备分辨率，我发现这对您有所帮助：

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

其中包含以下示例：

手机和掌上电脑

的iPhone

Galaxy Phones

HTC手机

片剂

ipad公司

Galaxy Tablets

Nexus平板电脑

Kindle Fire

笔记本

Retina

非视网膜

穿戴式

Apple Watch

Moto 360 Watch

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

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

Answer 2

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

em单位是相对于父级的字体大小，这会导致复合问题。 rem单元相对于root或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 上阅读更多信息和/或查看 video 。

你可以找到很好的工具，例如 rem calculator 。

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

有了这个，我的意思是你不需要知道，管理或控制每个设备的措施。

重新调整所有媒体的文字大小

2 个答案: