关于响应式布局的字体⼤⼩设置
原理:利⽤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");
}