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);
  • 相关阅读:
    [FJOI2007]轮状病毒
    [SHOI2013]发微博
    ATCODER ABC 099
    [HEOI2015]兔子与樱花
    [TJOI2017]可乐
    [TJOI2015]线性代数
    [Ceoi2008]order
    [CTSC2008]祭祀river
    [POI2009]Lyz
    数列分块(数据结构)学习笔记
  • 原文地址:https://www.cnblogs.com/gopark/p/8671250.html
Copyright © 2011-2022 走看看