第一种，媒体查询：
@media (min-width:0px){html{font-size:12px;}}@media (min-width: 320px){html{font-size:12px;}}@media (min-width: 340px){html{font-size:13px;}}@media (min-width: 360px){html{font-size:14px;}}@media (min-width: 380px){html{font-size:15px;}}@media (min-width: 400px){html{font-size:15px;}}@media (min-width: 420px){html{font-size:16px;}}
第二种：页面插入js（推荐）：
<script type="text/javascript">function fontSize(){var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;document.documentElement.style.fontSize=(deviceWidth/25)+"px"; }fontSize();window.onresize=fontSize;</script>
插入一段我自己写的测试例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><title>自适应字体大小和元素高度</title><style type="text/css">*{margin: 0;padding: 0;text-align: center;}h1{font-size: 2rem;padding: 2rem;}p{font-size: 1rem;padding: 1px;}div{width: 5rem;height: 4rem;background-color: #f00;}</style><script type="text/javascript" src="/jquery-latest.js"></script><script type="text/javascript">function fontSize(){var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;document.documentElement.style.fontSize=(deviceWidth/25)+"px"; }fontSize();window.onresize=fontSize;</script></head><body><h1>标题</h1><p>内容</p><div></div></body></html>
View Code
