请选择 进入手机版 | 继续访问电脑版

HTML5 移动端自适应布局

[复制链接]
建宸网络 发表于 2020-7-31 22:43:22 来自手机 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
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>

1

2

<p id="p2" class="text" style="border: 0.04rem solid #ccc;

            height: 14rem;font-size: 0.5rem;">


以上就是HTML5 移动端自适应布局的详细内容,

本文转载于:php中文网如有侵犯,请联系27428564@qq.com
5f152121d36f1139.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员
  • 活跃会员

    经常参与各类话题的讨论,发帖内容较有主见
  • 热心会员

    经常帮助其他会员答疑
  • 推广达人

    积极宣传本站,为本站带来更多注册会员
  • 宣传达人

    积极宣传本站,为本站带来更多的用户访问量
  • 灌水之王

    经常在论坛发帖,且发帖量较大
  • 突出贡献

    长期对论坛的繁荣而不断努力,或多次提出建设性意见
  • 优秀版主

    活跃且尽责职守的版主
  • 荣誉管理

    曾经为论坛做出突出贡献目前已离职的版主
  • 论坛元老

    为论坛做出突出贡献的会员

关注0

粉丝0

帖子437

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )