我需要一个可扩展的 HTML5 网站设计。我的想法是在 body 元素中定义 1px 的“基本”字体大小，并在“em”中定义与该值相关的所有子元素。
更准确地说:子元素(图像、div 等)的所有大小(宽度、高度、边距、填充和字体大小)都以“em”为单位定义，因此很容易仅缩放整个网站通过更改“基本”字体大小(在正文中)。
我需要这样做，因为不同的移动设备有不同的屏幕尺寸和不同的 devicePixelRatio 值。
因此，如果我通过 JavaScript 检测到更大的屏幕尺寸(例如大 1.2 倍)，我可以简单地为 body 元素设置 font-size: 1.2px，整个网站应该是 1.2 x 更大。
示例:
<!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 倍(=不是我想要的)。
整个想法是可行的解决方案，还是有更好的方法来创建完全可扩展的设计？
最佳答案
我尝试了所描述的解决方案，效果非常好。 我还注意到这似乎是一种很常见的做法。
我唯一建议更改的是使用 10px 的基本字体大小(而不是 1px)并将所有子元素除以 10。
关于html - 如何为移动设备设计可扩展的 HTML5 网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10797512/