提问者:小点点

字体大小相对于用户的屏幕分辨率?


我有一个流畅的网站,菜单是其宽度的20%。我希望菜单的字体大小得到适当的测量,这样它总是适合框的宽度,永远不会绕到下一行。我想用“em”作为一个单位,但它是相对于浏览器的字体大小,所以当我改变分辨率时,字体大小保持不变。

还尝试了分数和百分比。没有什么能像我需要的那样奏效。。。

请给我一个如何进行的提示。


共3个答案

匿名用户

有几种方法可以实现这一点。

*CSS支持相对于视口的维度。

> < li > < p > 3.2vw瓦=视口宽度的3.2%

3.2vh = 视口高度的 3.2%

3.2vmin = 小于 3.2vw 或 3.2vh

3.2最大值= 3.2瓦或3.2瓦时中的较大值

body
{
    font-size: 3.2vw;
}

见 css-tricks.com/....也看看 caniuse.com/....

>

  • 使用媒体查询,但需要多个断点的字体大小

     body
     {
         font-size: 22px; 
     }
     h1
     {
        font-size:44px;
     }
    
     @media (min-width: 768px) 
     {
        body
        {
            font-size: 17px; 
        }
        h1
        {
            font-size:24px;
        }
     }
    

    使用以%或rem为单位的尺寸。只需更改基本字体大小,一切都会改变。与前一个不同,您可以只更改主体字体,而不是每次都更改h1,或者将基本字体大小设置为设备的默认值,并将其全部保存在em中。

    >

  • “Root Ems”(rem):“rem”是一个可扩展的单元。 1rem 等于正文/html 的字体大小,例如,如果文档的字体大小为 12pt,则 1em 等于 12pt。 根 Em 本质上是可扩展的,因此 2em 等于 24pt,.5em 等于 6pt,依此类推。

    百分比(%):百分比单位很像“em”单位,除了一些基本区别。首先,当前字体大小等于100%(即12pt=100%)。使用百分比单位时,您的文本仍然可以完全扩展到移动设备和可访问性。

    看kyleschaeffer.com/....

  • 匿名用户

    您可以使用< code>em、< code>%、< code>px。但结合< code >媒体查询查看此链接,了解媒体查询。此外,CSS3有一些相对于当前视口大小的新值:< code>vw 、< code>vh和< code>vmin。请参见相关链接。

    匿名用户

    @media screen and (max-width : 320px)
    {
      body or yourdiv element
      {
        font:<size>px/em/rm;
      }
    }
    @media screen and (max-width : 1204px)
    {
      body or yourdiv element
      {
        font:<size>px/em/rm;
      }
    }
    

    你可以根据屏幕大小手动设置。看看不同的屏幕大小,然后手动添加字体大小。