美文网首页
设置rem布局

设置rem布局

作者: 辉色星空下 | 来源:发表于2023-03-28 21:29 被阅读0次

这样设置完成后在PC端1rem是100px,移动端1rem是50px

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

相关文章

  • css-进阶-css开发技巧-Layout Skill:布局技巧

    Layout Skill 使用vw定制rem自适应布局 要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的...

  • 移动端rem布局背景图片使用以及sprite雪碧图

    rem布局 所谓rem布局就是指为文档的根节点 元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。...

  • 移动端布局

    rem布局 rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性;1.计算公式: 元素的宽...

  • REM响应式布局理解与Swiper的使用

    REM响应式布局 REM: 根据根元素html的font-size值来设置大小EM: 根据body元素font-...

  • 移动端h5之rem布局/px2rem

    rem布局之媒体匹配 最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size 当然...

  • 响应式布局

    布局类别 1.固定网页布局:设置固定宽度,px为单位。常见PC端页面。 2.流式布局+伸缩布局+rem+媒体查询:...

  • 移动端H5 UI适配

    一、不允许页面缩放 二、设置script 布局采用rem,计算方式切图的px/100=xxx.rem三、横屏状态检测

  • 移动端布局方法

    主要介绍三种移动端布局方法: 响应式布局,利用@meida判断各个size。 REM 设置viewport中的wi...

  • 苏宁易购项目

    rem布局 认识rem rem适配1.伸缩布局 flex2.流式布局 百分比3.响应布局 媒体查询 (超小...

  • rem布局

    rem布局

网友评论

      本文标题:设置rem布局

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