HTML5 移动端自适应布局

场景：为适应各种大小的屏幕

自适应布局我知道的两种方式

1.使用媒体查询，下面制定了几种适应方式，例如第一个表示屏幕宽度在320px-360px之间的，htML字体大小适配为13.65px

style>
   @media only screen and (max-width: 360px) and (min-width: 320px){
    html{
         font-Size:13.65px;
    }
   }
   @media only screen and (max-width: 375px) and (min-width: 360px){
    html{
         font-size:23.4375px;
    }
   }
   @media only screen and (max-width: 390px) and (min-width: 375px){
    html{
         font-size:23.4375px;
    }
   }
   @media only screen and (max-width: 414px) and (min-width: 390px){
    html{
         font-size:17.64px;
    }
   }
   @media only screen and (max-width: 640px) and (min-width: 414px){
    html{
         font-size:17.664px;
    }
   }
   @media screen and (min-width: 640px){
    html{
         font-size:27.31px;
    }
   }
      /style>
    

2.响应式，获取到屏幕的宽度，计算出一定的比例大小，使用rem代替px，在使用的时候如 font-size：1rem，在不同屏幕大小的手机上展示的大小效果是不一样的，和手机屏幕的大小比例自适应

script>
   (function(doc, win) {
    VAR docEl = doc.documentElement, //根元素html     //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     recalc = function() {
          var clientWidth = docEl.clientWidth;
          if(!clientWidth) return;
          //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。      if(clientWidth >
= 640) {
           clientWidth = 640;
      }
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
          console.LOG(clientWidth);
          console.log(docEl.style.fontSize);
     }
    ;
         recalc();
        if(!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
 //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值    doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间   }
    )(document, window);
      /script>
    

p id="p2" class="text" style="border: 0.04rem solid #ccc;
                height: 14rem;
    font-size: 0.5rem;
    ">
    

推荐教程 ：《HTML》

以上就是HTML5 移动端自适应布局的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！