html移动端字体和宽度怎么设置,移动端页面宽度的获取及html字体设置

第一种方法

(function(){

var html=document.documentElement;

var hWidth=html.getBoundingClientRect().width;//获取到页面的宽度

html.style.fontSize=hWidth/7.5+'px';//将页面平分为7.5分份

console.log(html.style.fontSize)

})()

第二种方法(华为手机适配有问题)

let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;

let htmlDom=document.getElementsByTagName('html')[0];//获取html的dom

console.log(htmlWidth)

htmlDom.style.fontSize=htmlWidth/7.5+'px';//将页面平分为7.5份

window.addEventListener('resize',(e)=>{

htmlDom.style.fontSize=htmlWidth/7.5+'px';

})

在以750px的设计稿中，相当于1rem=100px为基础，就可以按照实际设计稿的尺寸除以100得到代码中对应的rem。例如设计稿中元素的font-size:30px，在写代码的时候我们就直接换成font-size:.3rem

第三种方法

(function(){

$('html').css('font-size', ($('body').width() /750 * 62.5 + "%"));

})()

页面设计稿750px，因移动端浏览器默认字号大小为16px;16*62.5%刚好为10px；页面中font-size:12px;则设置font-size:1.2rem;

rem：相对根节点html的font-size设置来作为当前元素1rem所代表的像素值，与em的区别就是rem的基本度量单位与父节点无关，只与根节点font-size的设置有关，如设置html{font-size:10px;}后当前dom所有节点的1rem都表示10px;

第四种

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth||window.screen.width;