clientWidth 和 getBoundingClientRect().width区别区别:
getBoundingClientRect():getBoundingClientRect用于获取某个元素相对于视窗的位置集合,即父级的宽度+2padding+2border。
clientWidth: 返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
方法一:通过getBoundingClientRect()获取
(function() {
let html = document.documentElement;
let width = html.getBoundingClientRect().width;
html.style.fontSize = width / 7.5 + 'px';
//1rem=100,设计稿宽度(750)/7.5=100(尽量取整)
})();
方法二:clientWidth获取
(function(){
//兼容不同浏览器获取页面可视宽度问题
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName("html")[0];
// 如果网页宽度大于750则让网页宽度等与750
if( htmlWidth > 750 ) {
htmlWidth = 750
}
htmlDom.style.fontSize = htmlWidth / 7.5 + "px";
})();