rem.js(第一版)

达里尔
• 阅读 82
!(function(win, doc) {
    function setFontSize() {
        // 获取window 宽度
        var winWidth = window.innerWidth;
        //这里是假设在750px宽度设计稿的情况下
        //可以根据实际需要修改,假设项目是750设计图下的实际尺寸除以40倍那么这里就是40,一般情况下是100
        doc.documentElement.style.fontSize = (winWidth / 750) * 40 + 'px';
        // 下面这行代码是为了有时候和自己项目的某些css代码冲突,需要用!important最高层级,上面的代码就失效了,用下面这行
        // doc.documentElement.setAttribute('style', 'font-size: '+(winWidth / 750) * 40 + 'px!important');
    }
    // onorientationchange 屏幕旋转事件
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    var timer = null;
    win.addEventListener(evt, function() {
        clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }
    }, false);
    //初始化
    setFontSize();
}(window, document));
点赞
收藏
评论区
推荐文章
翼
3年前
vue-cli3 中使用rem布局
1.装包postcsspx2rem及px2remloadernpminstallpostcsspx2rempx2remloadersave2.在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下//rem等比适配配置文件//基准大小constbaseSize16//设置rem
LinMeng LinMeng
1年前
移动端rem.js
functionremRefresh(){letclientWidthdocument.documentElement.clientWidth;//将屏幕分成10等份letremclientWidth/1
Wesley13 Wesley13
2年前
Java面试突击第一版发布啦!
介绍你可以把这个文档看做JavaGuide的精简版,适合面试前的突击。笔主开源的JavaGuide(Java学习面试指南)地址:https://github.com/Snailclimb/JavaGuide,目前Star数已经26.3k。公众号后台回复关键字"Java面试突击"即可获取下载地址,该资源笔主就永久免费提供给所有人。
Stella981 Stella981
2年前
Linux如何安装NovalIDE
NovalIDE自从发布第一版之后,受到了广大程序员的热烈欢迎,现在下载量已经破6000了。官方网址:NovalIDE官网(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.novalide.com)。同时这个是开源项目,在码云的项目评论超过了60。这里是项目地址(https:/
Stella981 Stella981
2年前
Android SharedPreferences 数据升级
在应用开发时,可能随着需求或者其他因素,原设计的SharedPreferences的值需要更改,这时我们该怎么做呢?下面来看一个例子,这是我们第一版开发的,package com.laomou.demo;import android.content.SharedPreferences;public c
Stella981 Stella981
2年前
Android 如何自定义EditText 下划线?
项目要求:笔者曾经做过一个项目,其中登录界面的交互令人印象深刻。交互设计师给出了一个非常作的设计,要求做出包含根据情况可变色的下划线,左侧有可变图标,右侧有可变删除标志的输入框,如图!Android如何自定义EditText下划线?(http://i.imgur.com/oYlipFY.jpg)记录制作过程:第一版本pu
Stella981 Stella981
2年前
MVC框架json数据展示程序(第一版)
模型原型:服务器的配置和运行状态信息。设计要求:Json格式数据解析后,判断配置信息是否是新数据或者是否更新。如是新数据,则直接添加到数据库;若是数据更新,则更新数据库配置信息并更新运行状态信息;都不是则仅将运行状态添加到数据库。最后从数据库取数据并展示。模型难点:每个服务器会搭载多个网卡和最多44个硬盘。(1)View层如何同时展示所有硬盘和其
Wesley13 Wesley13
2年前
Java 实现简单的SQL动态组装工具类
第一版packagecom.zh.oukele.util;importjava.util.HashMap;importjava.util.Iterator;importjava.util.Map;publicclassCreateSqlUtil{
kenx kenx
1年前
持续熬夜爆肝,炸裂的OPEN AI 快速开发平台后台管理同步上线啦 ,完全免费聊天主题也即将上线
持续几天几夜晚,不眠不休的项目开发,终于完成第一版整OPENAI快速开发平台API和大家见面了,这次包含后台管理,用户开发者入住,和完整的接口文档连接上一篇文章目前支持功能1.普通对话2.实时流式对话(基于websocket通信)3.AI画图4.个人订阅账
达里尔
达里尔
Lv1
大部分都是自己工作中遇到的问题,懒得用脑子记就写下来,主要是给自己看的,遇到的时候直接复制粘贴,如果对他人有帮助的话就更好了
文章
23
粉丝
3
获赞
13