14

我最近开始玩弄响应式网页设计，并在这里做了一个基本的测试：

http://test.studev.net/

它在桌面浏览器中运行良好，但是当加载到高分辨率设备（例如 iPhone 上的视网膜显示器）时，我对如何处理最小宽度设计有点困惑。由于这种类型的显示，这意味着例如在桌面上正常读取的 16 像素大小在 iPhone 4/5 上是不可能读取的。

这通常是如何处理的？

4

2 回答 2

15

好吧，如果您想在移动设备上使文本变小或变大，您会这样做

@media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

或者

@media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

并确保你的<HEAD>标签中有这个：

<meta name="viewport" content="width=device-width, initial-scale=1">

或者您也可以像这样禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

对于 IE10 支持，请尝试：

@-ms-viewport{
    width:device-width
}
于 2013-04-17T20:58:51.570 回答
6

您可以根据屏幕宽度选择字体大小：

    /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

要确保您的布局在移动屏幕上伸展，您必须使用视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1" />

此元标记需要在头标记内。“设备宽度”将是您的屏幕可以显示的最大像素。您还可以在那里设置一个常量值（600px）。

initial-scale=1 表示它会自动缩放到 100%。(0.5 => 50%)

于 2013-04-17T20:44:48.980 回答