移动设备上的字体大小与桌面相比有所不同

时间:2017-03-08 21:49:17

标签: html css font-size

我使用html和css创建一个网站,但我只是想知道是否有人知道所有平台上文本大小之间的差异。

如果我在桌面上创建一个20px的字体大小,在移动设备上看起来非常小而且你无法读取它,所以移动设备上的字体大小通常更大?

2 个答案:

答案 0 :(得分:1)

你是对的。 查看元素大小的EM(元素单位)和REM(相对元素单位)。另外,在标题中添加以下代码可能会解决您的问题:

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

答案 1 :(得分:1)

没有正确的meta标签,是的,文字会超小。

  

...移动设备上的字体大小通常更大?

不,通常不是。同样,大多数提供响应版本的网站都不会告诉他们font-size是80px(或其他什么),所以文字不是很小。

移动设备具有所谓的 设备宽度 。此设备宽度通常为每个CSS像素打包多个设备像素。我有一个三星Galaxy S6,其设备像素与CSS像素比为4:1。这意味着每个CSS像素有4个设备像素。此设备的分辨率(设备像素)为1440 x 2560,但CSS像素分辨率为360 x 640。

在桌面计算机上开发网站时,如果你告诉某个元素是100px宽,你实际上是在使用CSS像素。你可能认为它是一个设备像素(就像我曾经做过的那样),因为几乎所有桌面显示器的设备像素与CSS像素的比例都是1:1。

当使用响应式元标记时,如下所示,并且您告诉一个元素为300px宽,它将占据屏幕宽度的大部分,因为该元素将绘制在360 CSS像素宽的画布上,而不是1440设备像素宽画布(没有正确的meta标签会发生这种情况,并且在移动设备上显示“缩小”的网站外观。)

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

有用的链接:

希望一切都有意义,我试着保持“简单”。