分享一段小代码,处理原生html下移动端的适配方案

前端发展的很快,很多人上来学习或者使用直接就用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);
// 引用

// 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;
}

你可能感兴趣的:(分享一段小代码,处理原生html下移动端的适配方案)