zoukankan      html  css  js  c++  java
  • 移动端适配

    方案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);
  • 相关阅读:
    Vue对象提供的属性功能
    Vue快速入门
    Django-DRF(路由与扩展功能)
    Django-DRF(视图相关)
    Django-DRF(1)
    Django-Xadmin
    python 列表的append()和extend()
    map apply applymap
    pd.merge(), pd.concat()
    描述性分析与数据清洗 笔记
  • 原文地址:https://www.cnblogs.com/gopark/p/8671250.html
Copyright © 2011-2022 走看看