适配rem

作者: 卓小生 | 来源:发表于2018-04-22 00:11 被阅读0次

PPI 计算

var  width = window.screen.width ,
     height =  window.screen.height,
     PPI =  Math.sqrt( Math.pow(width ,2) + Math.pow(height ,2) ) / 屏幕尺寸

适配rem

(function(){
    var docEl = document.documentElement;
    //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
})()

相关文章

  • 适配rem

    PPI 计算 适配rem

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • loding...

    移动端适配 remflexible.js也是rem适配的,它是将设备分成10份,1rem等于1/10。分析其中部分...

  • 移动Web

    屏幕适配 rem适配 1、设置 设置页面元素宽度单位为 rem 或 em注:此方案比较灵活,我们的案例将采用这种方...

  • 移动端之js控制rem,适配字体

    移动端之js控制rem,适配字体

  • rem布局

    这个可以适配rem布局的JS代码

  • 移动端适配方案

    @description 该方法是用于移动端适配功能, 结合淘宝的适配方案flexible + rem 实现适配,...

网友评论

      本文标题:适配rem

      本文链接:https://www.haomeiwen.com/subject/swfqlftx.html