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);
  • 相关阅读:
    浪潮之巅阅读笔记
    人月神话阅读笔记3
    学习报告
    人月神话阅读笔记2
    学习报告
    第十一周学习总结
    软件杯项目——手写体识别
    第十周学习进度
    第九周学习进度
    《软件架构师的12项修炼》阅读笔记
  • 原文地址:https://www.cnblogs.com/gopark/p/8671250.html
Copyright © 2011-2022 走看看