我需要处理一个需要响应式的项目。这是我第一次这样做,我遇到了一个(可能很傻)的问题。
假设我有一个非常简单的页面:
<!DOCTYPE html>
<html>
<head>
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
正如预期的那样,在所有设备上,文本字体大小为1em(在这种特定情况下为18px)。并且,在更大的设备上看起来更大(我正在将其与Android手机、iPhone和Android平板进行比较):在两台手机上看起来相同,在平板电脑上看起来更大。到目前为止一切都好。
但是,如果我在代码中添加<meta name="viewport">
行,就像这样:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
现在这段文字在所有设备上都看起来一样大小,根据我的理解,这不应该是这样的。
所以,第一个问题是:我是否在尝试做正确的事情? 如果是的话,我该如何得到我想要的效果?
谢谢!