最新超简单的移动端手机适配

最新推荐文章于 2025-06-15 13:58:50 发布

转载最新推荐文章于 2025-06-15 13:58:50 发布 · 280 阅读

文章标签：

#超简单移动端适配

web前端同时被 2 个专栏收录

34 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍了三种使用REM单位实现响应式网页设计的方法，包括根据不同设备屏幕尺寸调整基准字体大小，确保设计图的尺寸能准确转换为rem单位，适用于各种屏幕分辨率。

//方法一
function setPxRem(){
    var cssEl = document.createElement('style');
    document.documentElement.firstElementChild.appendChild(cssEl);
    var dpr = 1;
    //把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
    var pxPerRem = document.documentElement.clientWidth * dpr / 10;
    cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
  }
  setPxRem()

把屏幕平均分成十份，按照iPhone6的尺寸，让设计图的px / 75 即为所适配的尺寸 rem


//方法二


//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小以iPhone6为基准设置的根字体是15px
htmlDom.style.fontSize= htmlWidth/25 + 'px';


//方法三
// 屏幕宽
new function (){
	   var _self = this;
	   _self.width = 750;//设置默认最大宽度
	   _self.fontSize = 100;//默认字体大小
	   _self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0?0:p;};
	   _self.changePage = function(){
		   document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
	   }
	   _self.changePage();
	   window.addEventListener('resize',function(){_self.changePage();},false);
	   FONTSIZE = _self.widthProportion()*_self.fontSize
	//    alert(_self.widthProportion())
	//    alert(_self.widthProportion()*_self.fontSize)
	//    alert(document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)
 }

默认的宽度是iphone 750尺寸下 1rem=100px(例如设计图宽为50px则为.5rem)