rem单位的计算,使用到的js

js:

/*响应式布局 start*/

function setRootFontSize() {

var width = document.documentElement.clientWidth, fontSize;

if (width > 750) { width = 750 }

fontSize = (width / 7.5);//这里除于7.5的意思就是100px等于1rem;

document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';

}

setRootFontSize();

window.addEventListener('resize', function() {

setRootFontSize();

}, false);

/*响应式布局 end*/


移动端中自适应问题是常见的问题,在不同的分辨率上呈现的效果是不一样的,在淘宝中就试用了rem单位来实现在不同分辨率上的手机一样的效果,rem可以自适应不同的分辨率手机,rem单位是根据html的字体大小来改变的,所以在不同的分辨率手机上字体大小是不一样的,所以就要根据不同分辨率的手机来适配,所以用了js代码控制了html的字体大小,使其rem的大小做适应

这段代码中写了宽度等于750,在使用宽度除于7.5的意思就             100px 等于 1rem

假如宽度是640,就是c除于6.4, 100px 等于 1rem;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,288评论 0 5
  • (转自:http://www.cnblogs.com/qiny-easyui/archive/2016/11/26...
    一个废人阅读 633评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 偶然间发现这篇文章,可以说,这是我见到的对移动rem单位做的最详细,最细心的一篇总结性文章,果断转载至本博客,以便...
    阿宝er阅读 1,168评论 5 51
  • 昨日,与花花相约素食馆,搭摩托车遇到一脸熟的朋友和他的弟弟(刚好是我招呼到的摩托师傅),上车前他们是准备兄弟俩一起...
    燕纪事阅读 307评论 0 0