html在所有设备中保持相同的字符大小

Question

我用几个输入按钮做了一个关于html的练习：

http://bullmalay.appspot.com/

我用我的手机访问它。但我发现文本大小真的很小。我认为原因在于解决方案。

有没有人能帮我讲讲文字大小？我希望它能在我的笔记本电脑上显示类似大小的内容。

ps。

我搜索了css:@media (min-width: 702px)，然后设置了字体大小。但我认为，即使是一个小设备的分辨率也可以高于我的laptop.The尺寸，它在我笔记本电脑屏幕上的显示也会更小。

我认为大小应该是: fontSize *(我笔记本电脑的每像素宽度)/(该设备的每像素宽度)。但是我对css并不熟悉。

Answer 1

谢谢你们所有人。我学到了很多。但我自己找到了原因。

移动设备上的浏览器将自动缩放页面以适应移动屏幕。我只需将这一行添加到html中，它就可以工作了：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Answer 2

你可以使用像@media handheld and (max-width: 500px)这样的东西。但不幸的是，我不认为有一种方法可以像这样使用CSS

fontSize *(我笔记本电脑的每像素宽度)/(该设备的每像素宽度)

Answer 3

到目前为止，我们只知道一种方法，你需要做一些这样的事情

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

有一件事你可以做，你可能想用pt单位(1pt = 1/72 inch)来设置你的字体大小，它与分辨率无关，并且在任何分辨率下看起来都是一样的。