首页 > 移动平台 > 详细

vue移动端适配就这么玩

时间:2020-06-21 17:16:41      阅读:90      评论:0      收藏:0      [点我收藏+]
rem 布局
在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem。)

  <script>
    (function () {
      // 在标准 375px 适配下,100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;

      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;

        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }

        document.querySelector(‘html‘).style.fontSize = rem + ‘px‘;
      }
      set();

      window.addEventListener(‘resize‘, set);
    }());   
  </script>

vue移动端适配就这么玩

原文:https://www.cnblogs.com/shiyunfront/p/13172977.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!