• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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>
    
    <div id="div2" class="text" style="border: 0.04rem solid #ccc;
                height: 14rem;font-size: 0.5rem;">
    

    到此这篇关于html5移动端自适应布局的实现的文章就介绍到这了,更多相关html5移动端自适应 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:HTML里显示pdf、word、xls、ppt的方法示例
    下一篇:详解移动端h5页面根据屏幕适配的四种方案
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5移动端自适应布局的实现 html5,移动,端自,适应,布局,