美文网首页
笔记-rem布局js版

笔记-rem布局js版

作者: kunlu | 来源:发表于2017-08-01 19:30 被阅读0次

rem 布局非常简单,首页你只需在页面引入这段原生 JS代码 就可以了

(function (doc, win) {

   var docEl = doc.documentElement,

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

   recalc = function(){

      var clientWidth = docEl.clientWidth;

      if(!clientWidth) return;

      if(clientWidth>=640){

         docEl.style.fontSize = '100px';

      }else{

            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

      }

  };

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

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

})(document, window);

然后再css的单位都改成rem,这里代码的1rem =100px,如要修改只需修改第八行的fontsize即可。

相关文章

  • 笔记-rem布局js版

    rem 布局非常简单,首页你只需在页面引入这段原生 JS代码 就可以了 (function (doc, win) ...

  • 一篇搞定移动端适配

    一篇搞定移动端适配 flexible.js 布局详解 Rem自适应js之精简版flexible.js

  • 移动端兼容

    rem与px的转换 flexible.js 布局详解 rem自适应布局的回顾总结 flexible.js如何实现r...

  • rem布局

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

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

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

  • h5自适应布局

    首先贴出js原生自适应布局的代码: 这是rem布局的核心代码。 什么是rem?rem是个低调的css单位,手淘在移...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • 项目中常用到的js方法整理

    一.change_view.js 用于手机端页面rem布局换算 640px=>6.4rem;100px=>1rem...

  • rem布局js

    二倍图7.5三倍图11.25

  • 前段面试题列举

    手机端开发要点有哪些 知不知道rem,和em的区别 用过rem布局吗 flex布局 js的基础类型,闭包,作用域链...

网友评论

      本文标题:笔记-rem布局js版

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