javascript - rem 适配问题
大家讲道理
大家讲道理 2017-04-11 13:18:59
[JavaScript讨论组]

为什么pc调试和在手机端看效果差这么多:
库: Vue, Webpack
浏览器: Chrome
布局: absolute
PC效果:

htc QQ 里面打开:

这是我的适配代码:

(function(win) {
    var doc = win.document,
      html = doc.documentElement,
      baseWidth = 720,
      rem = baseWidth / 100,
      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
      recalc = function() {
        var clientWidth = html.clientWidth || 320;
        // if( clientWidth > 750 ){ clientWidth = 750 };
        html.style.fontSize = clientWidth / rem + 'px';
      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', function() {
      setTimeout(recalc)
    }, false);
  })(window);
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(5)
PHP中文网

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"> 去掉这个看看

伊谢尔伦

我一般采用百分比布局。REM这种东西有时候还是不靠谱,计算也麻烦。

PHPz

你把计算到的font-size alert出来看看就知道了。

具体看参考淘宝的方案使用Flexible实现手淘H5页面的终端适配

迷茫

https://github.com/amfe/lib-f... 这是一个适配方案,亲身经历,相当好用 github上搜索这个项目lib-flexible

PHP中文网

建议看看这篇文章,对你帮助会很大:使用Flexible实现手淘H5页面的终端适配

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号