关于响应式布局的字体⼤⼩设置
原理：利⽤rem和js：
1.js设置html根节点的字体⼤⼩；
前端响应式布局
window宽度/每⾏多少个字
2、rem是参照html节点的
<html>
<head>
<title></title>
<meta charset="utf8">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<p>浏览器中⽤户都是可以⾃定义默认的⽂字⼤⼩的，如果使⽤ px，⽤户⾃⾏在浏览器设置中改变了⽂字⼤⼩后，⽹页上是不会变化的。我们不能排除视障⽤户（如近视）、⽼年⽤户不会这么做，作为⼀个具有「⼈⽂关怀」的前端，我们完全可以也再次印证前⾯提到的：响应式⽹页不仅仅是响应不同类型的设备，⽽且需要响应不同的⽤户需求。</p>
<p>window宽度/每⾏多少个字</p>
</body>
</html>
p{
font-size: 2rem;
}
$(function(){
fontSize();
$(window).resize(fontSize)
})
function fontSize(){
var h = $(window).width()/100;
console.log(h);
$("html").css("font-size",h+"px");
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。