如何为移动设备设计可扩展的 HTML5 网站？答案

【问题标题】：How to design a scalable HTML5 website for mobile devices?如何为移动设备设计可扩展的 HTML5 网站？
【发布时间】：2012-07-04 16:31:06
【问题描述】：

我需要一个可扩展的 HTML5 网站设计。我的想法是在 body 元素中定义一个 1px 的“基本”字体大小，并在“em”中定义相对于这个值的所有子元素。

更准确地说：子元素（图像、div 等）的所有大小（宽度、高度、边距、填充和字体大小）都以“em”单位定义，因此很容易仅缩放整个网站通过更改“基本”字体大小（在正文中）。

我需要这样做，因为不同的移动设备具有不同的屏幕尺寸和不同的 devicePixelRatio 值。

所以，如果我通过 JavaScript 检测到更大的屏幕尺寸（例如 1.2 倍大），我可以简单地为 body 元素设置 font-size: 1.2px，整个网站应该大 1.2 倍。

示例：

<!doctype html>
<html>

    <head>
        <title>foo</title>

        <style>
            body{
                font-size: 1px;
                /* If a sceen is 1.2x bigger than this "default" size, then change font-size to 1.2px */
            }

            #myimg{
                /* 200em = 200px in this case because body font-size=1px */
                width: 200em;
                height: 200em;
            }

            #somediv{
                width: 100em;
                height: 100em;
                font-size: 20em;
            }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <img id="myimg" src="foo.jpg">
            <div id="somediv">
                foo
            </div>
        </div>
    </body>

</html>

唯一的问题是定义了字体大小（例如 22em）的容器也会为其子元素定义一个新的“基本”字体大小，因此必须避免这种情况。

示例样式（绝对不能发生！）

#wrapper{
  font-size: 3px;
}

如果添加了上述样式，所有子容器（及其子容器）将变大 3 倍（=不是我想要的）。

整个想法是一个切实可行的解决方案，还是有更好的方法来创建完全可扩展的设计？

【问题讨论】：

我认为你所说的被称为“弹性布局”。关于如何正确执行此操作的提示无穷无尽，但并非都是好建议。这是一篇关于固定布局、流体布局和弹性布局之间区别的不错的文章：coding.smashingmagazine.com/2009/06/02/…

标签： html css

【解决方案1】：

我尝试了我描述的解决方案，效果很好。我还注意到这似乎是一种很常见的做法。

我唯一建议更改的是使用 10 像素（而不是 1 像素）的基本字体大小并将所有子元素除以 10。

【讨论】：

问题所有者接受这个作为正确答案，那么为什么-1？请删除
反对者愿意解释吗？对我来说，这篇文章正确地回答了我的问题。