3

我正在为主要为移动设备设计的网络创建一个聊天程序。我的问题是，为了尽可能适合移动设备，我放弃了像素字体大小em，但是在我的带有 Firefox 的台式电脑上，li文本显示非常小，并且在 iPad 上也是如此。在我的诺基亚 Lumia 800 windows 手机上，它显示得更大。

我的 CSS：

* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }

ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }

a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }

input[type="text"], input[type="password"]
{
    width:100%; margin:0;
    font-size:2em; border:0;
}

input[type="button"]
{
    width:100%; padding:10px; font-size:2em;
    font-variant:small-caps; letter-spacing:2px;
    border:1px solid #000000; background-color:#dddddd;
}

#messages
{
    width:100%; height:200px;
    border:0; padding:0; margin:0;
    overflow:auto; font-size:0.9em;
}

span.msgTime { font-size:0.7em; }

.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }

如您所见，列表元素使用 0.8em。我意识到存在浏览器不一致的情况，但这真的不可避免吗？

我还使用它来确保网页的比例正确显示：

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

更新 1

我认为值得一提的是，所有其他相对字体大小看起来都不错，它似乎只是在移动浏览器中不同的列表元素。

4

4 回答 4

4

em是相对于当前字体大小的度量。如果浏览器都有不同的默认基本字体大小，那么它们的外观会有所不同。尝试使用pt它仍然适用于不同尺寸的屏幕并且不像固定的那样px。

http://www.w3schools.com/cssref/css_units.asp

于 2012-08-24T16:44:47.460 回答
1

每个浏览器都有自己的默认样式表，用于设置基本文本大小。Ems 是根据默认文本大小更改大小的相对单位。试着给你body的 a font-size:16px，作为一个例子，看看这是否不会使文本以相同的大小显示。

为了更清楚，这里有一个链接可以帮助解释为什么我建议在元素上使用像素大小body，并且只在那个元素上使用。http://www.alistapart.com/articles/fluidgrids/

于 2012-08-24T16:44:27.133 回答
0

在 css 文件第 1 行显示

* { margin:0; padding:0; font-family:arial; }

将其替换为

* { margin:0; padding:0; font-family:arial; font-size: 1em; }

它会工作的！

于 2013-08-15T14:23:11.373 回答
-1

如果您希望让每个浏览器使用其默认字体大小，大概适合设备，根本不要设置正文字体大小，也不要meta像现在一样使用标签来防止缩放。

如果您认为“一刀切”是您的方式，那么以像素或点为单位设置字体大小（不同的方法），而不是尝试使用em单位来实现。

于 2012-08-24T16:52:32.277 回答