rem:是指相对于根元素字体大小的单位,一个相对单位。rem可以做到随着根元素的字体大小随之变化,达到自适应屏幕的效果。
使用步骤如下:
1、在html
的head
中加上meta
标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
代表宽度是设备宽度,同时不允许缩放。
2、设置根元素——相对于根元素html
html {font-size: 100px;} //100px方便计算,实际值需要自己确定
设置这个值,谷歌浏览器不会受影响,当是IE浏览器等时,会受影响,根据实际去调整值。
3、计算不同屏幕时根元素
可以使用媒体监听,也可以使用动态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'
}
var deviceWidth;
setHtmlFontSize();
function setHtmlFontSize() {
let deviceWidth = document.documentElement.clientWidth;
document.getElementsByTagName("html")[0].style.cssText =
"font-size:" + deviceWidth / 11 + "px !important";
}
4、根据高保真还原
每个单位大小用实际值除以100得到相对的rem
值。