CODE大全
您的位置 : 首页 > 前端技术 >

js实现rem自动匹配计算font-size

发布时间:『 2018-04-27

实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。

下面是相关JavaScript的实现代码:

(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? �http://www.bdx-leb.com/3d58/469254e05157.html39;orientationchange' : 'resize',
		recalc = function () {
			vahttp://www.bdx-leb.com/b17d/eac0471b5fe3.htmlr clientWidth = docEl.clientWidth;
			if (!clienthttp://www.bdx-leb.com/6515/48e59f11c4d1.htmlWidth) return;
			if(clientWidth>=640){
				docEl.style.fontSize = '100px';
			}else{
				docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
			}
		};
	//http://www.bdx-leb.com/8d15/97c2eb9eaeab.html 业余草:www.xttblog.com
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(dohttp://www.bdx-leb.com/b56d/73ac99b0ab26.htmlcument, window);

此代码选640px为基准值,为什么选640呢,

640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhhttp://www.bdx-leb.com/2266/ceccad65d8a3.htmlone 5使用的是Retina视网膜屏幕,使用2px x 2px的 devichttp://www.bdx-leb.com/6487/8dfaf712716a.htmle pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候,需要把效果图宽度等比例缩放到640px。

比如当页面中某一div的宽度为60,高度为65的时候,就可以直接这样写样式:

{
    width:0.6rem;
    height:0.65rem
}

浏览器的兼容性

rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefoxhttp://www.bdx-leb.com/5ddb/b520ee7f54a0.html 3.6+、Apple http://www.bdx-leb.com/9a15/380effef010d.htmlSafari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。

不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览http://www.bdx-leb.com/6bee/3d2c2ef89792.html器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么老呢?大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!


——— 全文完 ———
上一篇:CSS3 rem(设置字体大小) 教程 下一篇:没有了
Powered by 张鑫旭 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 张鑫旭 版权所有