根据屏幕宽度设定文字大小的方法:
1.css3媒体查询:
<style>
@media screen and (max-width: 320px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 480px) and (min-width: 321px) {
body {
font-size: 18px;
}
}
@media screen and (max-width: 720px) and (min-width: 481px ){
body {
font-size: 22px;
}
}
@media screen and (max-width: 800px) and (min-width: 721px ){
body {
font-size: 26px;
}
}
</style>
2.使用JS方法:
a.根据屏幕宽度设定字体
<script>
function textSetting(){ //根据屏幕宽度设定字体大小
var root = document.documentElement; //获取属性根节点
var w = root.clientWidth; //获取屏幕宽度
var fs = w <= 320 ? 14 : w >320 && w <= 480 ? 18 : 22; //判断文字大小
root.style.fontSize = fs + "px";
}
textSetting();
</script>
b.根据屏幕宽度计算文字大小
<script> function textSetting(minWidth,maxWidth){ //根据屏幕宽度计算字体大(14~35px) let maxfs = 35; //最大字体 var root = document.documentElement; var w = root.clientWidth; w = w > maxWidth ? maxWidth : w <minWidth ? minWidth : w; var fs = w / maxWidth * maxfs; root.style.fontSize = fs + "px"; } textSetting(400,800); </script>