前端发展的很快,很多人上来学习或者使用直接就用vue、react、等各种框架。导致写惯了框架,用惯了插件,回归到原生html css的时候,写一个移动端适配,是否突然有点脑袋大的感觉呢,下面这段代码解决你的困扰。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;recalc();
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 引用
<script src="./js/rem.js"></script>
// css里使用
.btn {
text-align: center;
color: #fff;
font-size: 0.26rem;
font-weight: 400;
cursor: pointer;
width: 3rem;
height: 0.6rem;
line-height: 0.6rem;
background: linear-gradient(0deg, #F29613, #ECB216);
border-radius: 0.3rem;
margin: 0 auto;
}