//百分比布局只能实现宽度自适应 高度无法自适应
//高度也自适应 使用一个新的单位rem
rem ： root element 根元素 参照根元素的字体大小，是相对单位
默认html元素文字大小是16px 所以 1rem == 16px ， 10rem == 160px
原理：
resize();
function resize() {
// 假设一个设计稿的宽度 750
var DesignWidth = 750;
var DesignFontSize = 200;
// 获取当前视口的宽度
var nowWidth = document.documentElement.clientWidth;
/*750 / 200 == 375 / 100
设计稿 / 设计稿根元素 == 当前屏幕 / 当前屏幕根元素
375 / (750 / 200) == 100
当屏幕 / (设计稿 / 设计稿的根元素)
320 / (750 / 200) == 85.3333px */
/* 4 / 2 == 2 / x
2 / ( 4 / 2 ) == 1*/
var nowFontSize = nowWidth / (DesignWidth / DesignFontSize);
document.documentElement.style.fontSize = nowFontSize + 'px';
}
window.addEventListener('resize',resize)
示例：
window.onresize = () => {
setHtmlFontSize()
}
setHtmlFontSize()
$(window).bind( 'orientationchange', function(e) {
setTimeout(() => {
setHtmlFontSize()
}, 200)
});
function setHtmlFontSize () {
//判断横竖屏
let fontSize = 0
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if( width > height ){
fontSize = height / 7.5
}else {
fontSize = width / 7.5
}
document.getElementsByTagName('html')[0].style = 'font-size:' + fontSize + 'px'
}