首页 > 解决方案 > @media all and (device-aspect-ratio: 1.78) { }

问题描述

我想在手机上查看网页内容时使用特定的字体大小(纵横比为 2.05);并且,在我的 PC 上查看网页内容时的另一种字体大小(纵横比为 1.78)

看起来我做错了什么(请参阅下面的代码)。我的@media all代码部分被完全忽略。我怎样才能正确地做到这一点?

需要注意的一件重要事情。此 HTML 显示在我的电子邮件阅读器(我的 PC 和手机电子邮件应用程序)上。我正在寻找一种在指定字体大小时区分手机电子邮件客户端和台式电脑电子邮件客户端的好方法。如果有更好的方法,我愿意接受建议。

代码:

<html>
</head>
<style>
    @media all and (device-aspect-ratio: 1.78) {
        body {
            font-family: "Source Code Pro", monospace;
            font-size: 8px;
        }

    }

    @media all and (device-aspect-ratio: 2.05) {
        body {
            font-family: "Source Code Pro", monospace;
            font-size: 4px;
        }
    }
</style>
</head>

<body>
    This HTML is displayed in my email readers (both PC & Mobile Phone).
</body>
<html>

标签: htmlcss

解决方案


推荐阅读