zoukankan      html  css  js  c++  java
  • rem 自适应、整体缩放

    html{
    font-size: calc(100vw/7.5);
    }

    说明:
    100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。

    若是低版本的设备不支持rem,那么就需要js来处理一下:

    document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'

    (function() {
    var doc = document,
    win = window;
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
    var clientWidth = docEl.clientWidth;
    if(!clientWidth) return;
    //如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px
    if(clientWidth > 750) { clientWidth = 750 }
    //设置根元素font-size大小
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
    //屏幕大小改变,或者横竖屏切换时,触发函数
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时,触发函数
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })();

  • 相关阅读:
    Fiddler工具抓包
    简单Ant打包
    android中ActionBar的几个属性
    yum安装php7.2
    java 获取计算机内存
    docker apache安装
    docker 安装 openresty
    docker 安装nginx
    docker安装gitlab
    java获取时间格式
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/9593150.html
Copyright © 2011-2022 走看看