pc端rem适配_pc端自适应——rem

遇到项目需求变更，需要自适应4:3主流屏幕，于是采用了rem，和动态js计算根元素。

1.rem

rem是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。

2.步骤

在html的 head中加上meta标签

代表宽度是设备宽度，同时不允许缩放。

设置根元素-相对于根元素html

html {font-size: 100px;} //100px方便计算，实际值需要自己确定

计算不同屏幕时根元素

可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算

var deviceWidth

setHtmlFontSize()

if (window.addEventListener) {

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

setHtmlFontSize()

}, false)

}

function setHtmlFontSize () {

// 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66

deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidth

document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'

}

根据高保真还原

每个单位大小用实际值除以100得到相对的rem值。

然后就完美还原辣！