• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2017-11-11) 922次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

 (function (doc, win) {  
 var docEl = doc.documentElement,   
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',   
 recalc = function () {    
 var clientWidth = docEl.clientWidth;    
 if (!clientWidth) return;    
 if(clientWidth>=640){     
 docEl.style.fontSize = '100px';    }else{     
 docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';    }   };  
 // web 前端中文站:www.lisa33xiaoq.net  
 if (!doc.addEventListener) return;  
 win.addEventListener(resizeEvt, recalc, false); 
 doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

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

640px 的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的 px 是 css 逻辑像素,与设备的物理像素是有区别的。如 iPhone 5 使用的是 Retina 视网膜屏幕,使用 2px x 2px 的 device 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 Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和 Opera11+。只是可怜的 IE6-8 无法,你们就把他们当透明了吧,我向来都是如此。

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

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js 实现 rem 自动匹配计算 font-size
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址