美文网首页
关于rem算法

关于rem算法

作者: 战神七小姐 | 来源:发表于2018-10-01 09:16 被阅读0次

1.

(function (doc, win) {

  var docEl = doc.documentElement,

      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

      recalc = function () {

      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      docEl.style.fontSize = (clientWidth / 15) * 4 + 'px';

      };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener('DOMContentLoaded', recalc, false);

  })(document, window);

2.

<script>

        var initHandle = function() {

            function Rem() {

                if (document.documentElement.clientWidth <= 320) {

                    document.documentElement.style.width = 320 + "px";

                } else {

                    var rem = document.documentElement.clientWidth / 7.5;

                    document.documentElement.style.fontSize = rem + 'px';

                }

            }

            var Dw = document.documentElement.clientWidth

            if (Dw <= 750) {

                Rem()

            } else {

                document.documentElement.style.fontSize = '16px';

            }

        }

        initHandle()

        window.onresize = function() {

            initHandle()

        }

    </script>

3.连接flexible.js

<script src="../libs/flexible.js"></script>

4.

<script>

        var reg = document.documentElement.clientWidth;

        document.documentElement.style.fontSize = 100 * reg / 750 + "px"

    </script>

    <style>

        * {

            font-size: .14rem;

        }

    </style>

相关文章

  • 关于rem算法

    1. (function (doc, win) { var docEl = doc.documentElement...

  • rem和em的区别

    # 关于rem和em的区别 ### rem > rem:`表示根元素的字体大小`(通常为``) > ##### 下...

  • rem和em的区别

    关于rem和em的区别 rem rem:`表示根元素的字体大小`(通常为``) 下面是一个动态设置html字体大小...

  • 谈谈 rem 与 vw -- rem

    谈谈rem与vw — rem 写这篇文章的原因,源于我在头条的面试。面试官问到了关于手机端适配rem的问题,这个问...

  • 解决vue移动端适配问题

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

  • 解决vue移动端适配问题

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

  • 关于rem布局问题

    这个js文件来设置根元素的font-size,从而换算之后在页面中rem布局。这次我做h5活动页,还是那个安卓下唤...

  • 关于rem和em

    em 首先要知道em是相对于谁的值。以前我一直以为em是使用em这个元素的父元素的font-size值。这句话是对...

  • 关于px、em、rem

    px px是相对与屏幕分辨率而言的px是固定的长度单位,因为在页面方法和缩小的时候,字体大小不变 em 值为不固定...

  • 修改修改控制台的默认代码页步骤

    一次性 rem 英文chcp 437 rem 日文chcp 932 rem 简体中文chcp 936 rem 韩文...

网友评论

      本文标题:关于rem算法

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