码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-09-02 13:16:15      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:

原理:利用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");
}

 

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

标签:

原文地址:http://www.cnblogs.com/yzg1/p/4778233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!