0

我需要一个可扩展的 HTML5 网站设计。我的想法是在 body 元素中定义一个 1px 的“基本”字体大小，并在“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>

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

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

#wrapper{
  font-size: 3px;
}

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

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

4

1 回答 1

-2

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

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

于 2012-07-04T08:31:06.367 回答