我有一个流畅的网站,菜单是其宽度的20%。我希望菜单的字体大小得到适当的测量,这样它总是适合框的宽度,永远不会绕到下一行。我想用“em”作为一个单位,但它是相对于浏览器的字体大小,所以当我改变分辨率时,字体大小保持不变。
还尝试了分数和百分比。没有什么能像我需要的那样奏效。。。
请给我一个如何进行的提示。
有几种方法可以实现这一点。
*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;
}
}
你可以根据屏幕大小手动设置。看看不同的屏幕大小,然后手动添加字体大小。