設置相對於各種屏幕尺寸的基本字體大小的字體大小

基於屏幕尺寸我想設置各種元素相對於基本字體大小的大小，例如，對於設備寬度320px，元素h1是基本字體的10％和設備寬度1024像素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; 
    } 
}

來源

2014-07-04 user1502901

rem使用。這單元表示根元素的字體大小（例如html元素的字體大小），不需要太多計算（與其說：p）和是害怕像電子郵件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; 
    } 
}

來源

2014-07-04 13:09:52 AlexDom

謝謝..這是我一直在尋找。我也想知道基數的大小可以用px和百分比表示嗎？在所有瀏覽器（移動設備和桌面設備）上指定html {font-size：67.5％}將爲10px？ – user1502901

通常情況下，所有新的瀏覽器似乎都有16像素，100％的字體大小，所以你可以但對於舊的瀏覽器我不確定（或舊的移動瀏覽器） – AlexDom