位置：固定在移动设备上打破字体大小

Question

我正在开发移动设备网站。由于不同的分辨率等，我们的想法是将字体大小保持在浏览器的默认大小（100％）。这个font-size: 100%按计划工作（即文本在移动浏览器中可读，而不是很小）#content。但是，#header中的文字很小且不可读。为什么不同？是因为#header有position:fixed吗？如果是这样，是否有一种解决方法或更好的做法是使标题文本与移动友好的#content大小相同？感谢。

CSS：

body, html {
   width: 100%;
   height: 100%;
   font-size: 100%;
}
#main {
   width: 100%;
   height: 100%;
   overflow: auto;
   font-size: 100%;
}
#header {
   position: fixed;
   top: 0;
   width: 100%;
   background: black;
   color: white;
   text-align: center;
}
#content {
   width: 100%;
}

HTML：

<div id='main'>
   <div id='header'>header here</div>
   <div id='content'>content here</div>
</div>

Answer 1

确定。因此，为了更好地解释您的问题，这个特定的stack问题几乎可以为您提供所有要点。但作为一个更简单的解释，您的手机告诉网络它不是为所有网站和所有功能设计的，但是，使用以下代码：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

此代码将告诉HTML它是针对与您的网站合并的任何类型的样式而设计的。但同样，与此答案相关的堆栈问题是更好的参考：）

Answer 2

使用以下css规则

body, html {
   width: 100%;
   height: 100%;
   font-size: 1em;
}
#main {
   width: 100%;
   height: 100%;
   overflow: auto;
   font-size: 1em;
}
#header {
   position: fixed;
   top: 0;
   padding:5px;
   width: 100%;
   background: black;
   color: white;
   text-align: center;
}
#content {
   width: 100%;
}

注意：不要将px用于font-size而不是em .em为您提供浏览器的默认字体大小！ 希望答案！