• 移动端适配


    方案1:
    使用rem进行换算,根据移动端屏幕大小的变化,来动态的设置根元素的字体大小,rem就是根据根元素html的字体大小渲染的,

    如果是375px的设计图,那么就将元素的尺寸px乘以2,再除以100就是该元素的rem值了,如果是750px的设计稿就直接除以100
    function mobileMatvhing(){
       var html = document.getElementById('html');
       var phoneWidth = document.documentElement.clientWidth;
       html.style.fontSize = phoneWidth*100/750 + 'px'
    }


    方案2:
    如果是375px的设计图,设计图直接除以100,转化为rem
    (function (_D) {
                var _self = {};
                _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
                _self.Html = _D.getElementsByTagName('html')[0];
                _self.widthProportion = function () {
                    var p = Number(((_D.body && _D.body.clientWidth) || _self.Html.offsetWidth) / 375).toFixed(3);
                    return p;
                };
                _self.changePage = function () {
                    _self.Html.setAttribute('style', 'font-size:' + _self.widthProportion() * 100 + 'px');
                };
                _self.changePage();
                if (!document.addEventListener) return;
                window.addEventListener(_self.resizeEvt, _self.changePage, false);
                document.addEventListener('DOMContentLoaded', _self.changePage, false);
            })(document);
  • 相关阅读:
    Hive 2.1.1安装配置
    vi / vim 删除以及其它命令
    『MySQL』时间戳转换
    update 中实现子查询
    hive lateral view 与 explode详解
    xpath定位方法详解
    Python int与string之间的转化
    ORM、SQLAchemy
    python bottle 简介
    python wsgi 简介
  • 原文地址:https://www.cnblogs.com/gopark/p/8671250.html
Copyright © 2020-2023  润新知