Question

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

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

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

因此，如果我通过JavaScript检测到更大的屏幕尺寸（例如大1.2倍），我只需将font-size: 1.2px设置为body元素，整个网站应该大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>

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

示例样式（不得发生！）

#wrapper{
  font-size: 3px;
}

如果上面添加了这种风格，所有子容器（及其子容器）将变大3倍（=不是我想要的）。

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

Answer 1

我尝试了我所描述的解决方案并且效果很好。我还注意到这似乎是一种非常普遍的做法。

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

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

1 个答案: