自適應網頁裡,字型大小如何自適應螢幕
阿新 • • 發佈:2019-01-07
字型大小使用 em, rem 作為單位,然後使用 media query 來調整 html 元素的 font-size
自適應網站
html {font-size: 62.5%!important; /* 10÷16=62.5% */} @media only screen and (min-width: 481px){ html { font-size: 94%!important; /* 15.04÷16=94% */ } } @media only screen and (min-width: 561px){ html { font-size: 109%!important; /* 17.44÷16=109% */ } } @media only screen and (min-width: 641px){ html { font-size: 125%!important; /* 20÷16=125% */ } }
app
@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}} @media only screen and (min-width: 360px){html {font-size: 72.5%!important;}} @media only screen and (min-width: 400px){html {font-size: 82.5%!important;}} @media only screen and (min-width: 480px){html {font-size: 94%!important;}}