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单位的计算,使用到的js)