rem.js移动端适配

1. js文件:

function recalc(x,bol) {
	var clientWidth = document.body.clientWidth;

	if (bol && (!clientWidth || clientWidth > x)) {
		document.documentElement.style.fontSize = "";
		return;
	};
	document.documentElement.style.fontSize = 100 * (clientWidth / x) + 'px';
};
var remCompute = function (width,device) {
	if (window.addEventListener) {
		recalc(width,device);
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		window.addEventListener(resizeEvt, function () {recalc(width,device)}, false);
	};
};


// NOTE:
	// html页面body下的最上方引入方法
	// width: 预设宽度/预设响应的时机;
	// device:true(pc)   false(mobile)
	// =ture时  **pc做响应式时只有在小于width时才计算**
	// =false时  **mobile端随时都进行计算**


// 方法: remCompute(640,false);
// 换算方法: 100px = 1rem; 例如20px = 0.2rem;

2. 页面引入:

<script src="js/rem.js" charset="utf-8"></script>
<script type="text/javascript">
    remCompute(900, true); //900是浏览器小于多少的时候开始将px转化为rem
</script>

3. CSS:

body{ color: #fff; font-size: 16px; width: 100%; min-width: 1903px; font-family:-apple-system,"Source Sans Pro","Noto Sans CJK SC","PingFang SC","Segoe UI","Microsoft YaHei",Sans-Serif,Helvetica,Arial; }

@media (max-width:900px){
    body{ min-width: auto; font-size: 0.16rem; background-color: #070c2b}
}

* 注意:

不要给html / body设置最大或最小宽度,会影响换算。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值