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

本文介绍了三种使用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)

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值