H5页面字体大小使用rem (重置字体大小)setFontSize.js
2018-01-16 11:04
746 查看
注意:
移动端APP根据设备屏幕尺寸调整根元
a1ad
素font-size的js代码
html字体大小要先设置成100px,并且JS在CSS重置为100px以后引入。
//初始化rem (function(){ var getStyle = (function(){ if(window.currentStyle){ return function(obj, name){ return obj.currentStyle[name]; } } else{ return function(obj, name){ return getComputedStyle(obj, false)[name]; } } })(); var addEvent = (function(){ if(document.attachEvent){ return function(obj, ev, fn){ obj.attachEvent('on'+ev, fn); }; } else{ return function(obj, ev, fn){ obj.addEventListener(ev, fn, false); }; } })(); var oHtml = document.querySelector('html'); var fontSize = getStyle(oHtml, 'fontSize').split('px')[0]; var originalWidth = 750; setFontSize(); addEvent(window, 'resize', function(){ setFontSize(); }); function setFontSize() { var size = size || 200; var _fontSize = (getSize()['width'] * fontSize / 750)>size?size:(getSize()['width'] * fontSize / 750); oHtml.style.fontSize = _fontSize + "px"; } function getSize() { return { width :document.documentElement.clientWidth || document.body.clientWidth, height :document.documentElement.clientHeight || document.body.clientHeight } } })();
移动端APP根据设备屏幕尺寸调整根元
a1ad
素font-size的js代码
相关文章推荐
- H5 手机页面字体显示大小与css设置不一致,viewport影响font-size问题
- 使用了js控制根元素的font-size大小,然后进行rem换算
- 手机端页面需要用rem设置字体大小的js代码
- js+rem动态计算font-size的大小,适配各种手机设备
- 第148天:js+rem动态计算font-size的大小,适配各种手机设备
- Skype—set font size —in CentOS/Fedora/RHEL—修改Skype字体大小
- js+rem动态计算font-size的大小,适配各种手机设备!
- CSS样式中字体大小,建议font-size使用em
- JS根据设备宽度设置根节点(html)font-size字体大小
- CSS样式中字体大小,建议font-size使用em
- Jquery 设置字体大小(font-size)与行高(line-height)
- 建议Font-Size使用em单位控制大小
- 移动端字体单位font-size选择px还是rem
- cocos2d js 使用 bmpfont生成的字体文件
- 使用Hammer.js的H5页面开发DOM的一些小说法
- 线程堆栈大小 pthread_attr_setstacksize 的使用【转】 http://www.cnblogs.com/qq78292959/archive/2012/03/29/2423821
- IE中使用font-size来调整element大小,显示background-image
- Android - Android Studio修改字体(font)大小(size)
- 线程堆栈大小 pthread_attr_setstacksize 的使用
- html页面控制字体大小的js代码