您的位置：首页 > 其它

关于响应式布局的字体大小设置

2015-09-02 12:18 246 查看
原理：利用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，用户自行在浏览器设置中改变了文字大小后，网页上是不会变化的。我们不能排除视障用户（如近视）、老年用户不会这么做，作为一个具有「人文关怀」的 前端，我们完全可以考虑这些情况。由其是在引入了 CSS预处理工具之后，这几乎不会增加什么成本。
也再次印证前面提到的：响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。</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");
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航