用rem布局时,通过jquery来实现自动根据网页的大小来改变字体的大小亲测 原创

文章标签:
  • :
  • 04-24 18:16
  • :
  • 8次
  • :
  • 0条
  • 0赞

简介在用rem布局时,通过jquery来根据屏幕的大小来调整尺寸时的具体方法和在线实例演示。l

我们在开发网页时,尤其是在制作手机网页时,在布局的时候通常用的是rem来布局的,而通过rem来布局的好处就是在不同尺寸的屏幕下时,我们只用修改字体的大小,就能改变对应的布局的大小。

先来看一个用rem来布局的实例:

<style type="text/css">    
html,body {font-size:52px} 
</style>

<div id="aijquery" style="height:3rem;width:6rem;border:1px solid red"></div>

上面代码里,我们先设一个基准值,就是正常字体的大小,然后在布局的时候,相应的宽度高度就用rem来就行了,1rem等于1字体高度,2.5rem就等于2.5字体高度了,而我们定义的字体大小是52px,所以1rem就等于52px.

我们了解了如何用rem来布局后,那么我们接下来要实现的就是根据屏幕的大小来自动改变布局的大小:

<script language="javascript">    
var DoChange=function(){		
    var clientWidth=$(window).width();		
    fsize = 16 * (clientWidth / 640) + 'px';		
    $("html,body").css("font-size",fsize);      	
    $("#aijquery").text(function(){    		
        return "高:"+$(this).height()+";宽:"+$(this).width();    	
    });	
};	
$(window).on("load resize orientationchange",function(){		
    DoChange();	
});  
</script>

上面代码里,load是指网页加载完成后,resize是指窗口大小改变时,orientationchange是手机浏览器里才有的,意思是翻转的时候。


下面是完整的在线实例演示:

通过rem布局的实例 及通过jquery来根据屏幕大小来自动调整的在线实例演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-08-02 11:24:25