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

    一、屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    二、

    const MAX_FONT_SIZE = 42;
    
    document.addEventListener('DOMContentLoaded', () => {
        const html = document.querySelector('html');
        let fontSize = window.innerWidth / 10;
        fontSize  = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;
        html.style.fontSize = fontSize + 'px';
    });
    // 以 Iphone 6、6s、7、8 为设计基础。
    // 定义预计根元素 fontSize。
    $rootFontSize: 375 / 10;
    // 定义像素转化为 rem 函数
    @function px2rem ($px) {
        @return $px / $rootFontSize + rem;
    }

     三、一套视觉稿适配所有移动设备的js框架:pageresponse

      GitHub:https://github.com/peunzhang/pageResponse

    • 用transform:scale缩放页面,要求视觉稿高清
    • 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面
  • 相关阅读:
    【转载】久坐如吸烟
    【转载】实用的人际关系经验
    【原创】Apache服务器500错误失去响应的问题解决
    【原创】JAVA word转html
    【原创】Linux下的ngix服务器安装步骤
    【原创】Apache和基于虚拟主机的Tomcat集群方案
    网络编程基础知识
    多线程1
    字符流
    字节流
  • 原文地址:https://www.cnblogs.com/zjz666/p/11717235.html
Copyright © 2011-2022 走看看