我使用html和css创建一个网站,但我只是想知道是否有人知道所有平台上文本大小之间的差异。
如果我在桌面上创建一个20px的字体大小,在移动设备上看起来非常小而且你无法读取它,所以移动设备上的字体大小通常更大?
答案 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">
有用的链接:
希望一切都有意义,我试着保持“简单”。