Question

我的基本字体大小为50px。

根据屏幕尺寸，我想设置相对于基本字体大小的各种元素的大小，即对于设备宽度320px，元素h1是基本字体的10％，对于设备宽度1024 px h1是基本字体的20％。

这可以以任何方式完成吗？

@media screen and (max-device-width : 320px)
{
  body or yourdiv element
  {
    font:10% of basefont;
  }
}
@media screen and (max-device-width : 1204px)
{
  body or yourdiv element
  {
    font:20% of basefont;
  }
}

Answer 1

使用rem。此单位表示根元素的字体大小（例如html元素的字体大小），不需要太计算（不是很多：p）和em description

一样害怕

html { font-size:50px; }
@media screen and (max-device-width : 320px)
{
    yourdiv element
    {
        font:0.1rem;
    }
}
@media screen and (max-device-width : 1204px)
{
    yourdiv element
    {
        font:0.2rem;
    }
}

Answer 2

您可以使用css calc（）从basefont大小百分比中减去所需的百分比。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

当然，旧浏览器和较旧的Android浏览器不支持它。

http://caniuse.com/#feat=calc

针对各种屏幕尺寸，相对于基本字体大小设置字体大小

2 个答案: