码迷,mamicode.com
首页 > 移动开发 > 详细

移动端rem字体适配JS

时间:2016-11-24 11:10:58      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:win   code   remove   des   one   log   innerhtml   value   bsp   

// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户
function adapt(designWidth, rem2px) { 
//  designWidth:‘设计图宽度‘   1rem==rem2px+‘px‘                     
    var d = window.document.createElement(‘div‘);
    d.style.width = ‘1rem‘;
    d.style.display = "none";
    var head = window.document.getElementsByTagName(‘head‘)[0];
    head.appendChild(d);
    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue(‘width‘));
    d.remove();
    document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + ‘%‘;
    var st = document.createElement(‘style‘);
// 适应横屏、竖屏
    var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";
    var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"
    st.innerHTML = portrait + landscape;
    head.appendChild(st);
    return defaultFontSize
};
var defaultFontSize = adapt(640, 100);

 

移动端rem字体适配JS

标签:win   code   remove   des   one   log   innerhtml   value   bsp   

原文地址:http://www.cnblogs.com/yunfly/p/6096819.html

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