Rem自适应js---flexible.min.js

 

网上看到很多移动端适配的各种方法，由于原来工作中对rem的疏忽，所以决定重新学习rem~

由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。

阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

在这里找到了一个精简版的flexible.min.js,可以适配所有的移动端:

代码如下:

  1. //designWidth:设计稿的实际宽度值，需要根据实际设置
  2. //maxWidth:制作稿的最大宽度值，需要根据实际设置
  3. //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
  4. ;(function(designWidth, maxWidth) {
  5.     var doc = document,
  6.     win = window,
  7.     docEl = doc.documentElement,
  8.     remStyle = document.createElement("style"),
  9.     tid;
  10.  
  11.     function refreshRem() {
  12.         var width = docEl.getBoundingClientRect().width;
  13.         maxWidth = maxWidth || ;
  14.         width>maxWidth && (width=maxWidth);
  15.         var rem = width *  / designWidth;
  16.         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  17.     }
  18.  
  19.     if (docEl.firstElementChild) {
  20.         docEl.firstElementChild.appendChild(remStyle);
  21.     } else {
  22.         var wrap = doc.createElement("div");
  23.         wrap.appendChild(remStyle);
  24.         doc.write(wrap.innerHTML);
  25.         wrap = null;
  26.     }
  27.     //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  28.     refreshRem();
  29.  
  30.     win.addEventListener("resize", function() {
  31.         clearTimeout(tid); //防止执行两次
  32.         tid = setTimeout(refreshRem, );
  33.     }, false);
  34.  
  35.     win.addEventListener("pageshow", function(e) {
  36.         if (e.persisted) { // 浏览器后退的时候重新计算
  37.             clearTimeout(tid);
  38.             tid = setTimeout(refreshRem, );
  39.         }
  40.     }, false);
  41.  
  42.     if (doc.readyState === "complete") {
  43.         doc.body.style.fontSize = "16px";
  44.     } else {
  45.         doc.addEventListener("DOMContentLoaded", function(e) {
  46.             doc.body.style.fontSize = "16px";
  47.         }, false);
  48.     }
  49. })(, );

使用方法：·

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

上面的代码，如果在uc浏览器下横屏与竖屏转换，发现代码并没有自适应，则通过下面进行解决bug:

  1. 已经找到兼容方案，可通过js在页面的head里生成定义了html元素font-size的style元素来解决！
  2. 如下：
  3.  
  4. <style id="rootFontSize">html{font-size: 100px !important;}</style>
  5. 注意还加了important来提高权重

该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。·

假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}

基本的HTML模板·

你也可以直接复制下面这个基础的HTML模板。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6. <meta content="yes" name="apple-mobile-web-app-capable">
  7. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8. <meta content="telephone=no" name="format-detection">
  9. <meta content="email=no" name="format-detection">
  10. <meta name="description" content="不超过150个字符"/>
  11. <meta name="keywords" content=""/>
  12. <meta content="caibaojian" name="author"/>
  13. <title>前端开发博客</title>
  14. <link rel="stylesheet" href="base.css">
  15. <script type="text/javascript">
  16. //引入该flexible.min.js
  17. !function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||,n>t&&(n=t);var i=*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,)},!),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,))},!),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!)}(,);
  18. </script>
  19. </head>
  20.  
  21. <body>
  22.     <!-- 正文 -->
  23. </body>
  24. </html>

base.css:

  1. body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:;padding:;}
  2. ul,ol{list-style:none;}
  3. a{text-decoration:none;}
  4. html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
  5. body{line-height:1.5; font-size:14px;}
  6. body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
  7. b,strong{font-weight:bold;}
  8. i,em{font-style:normal;}
  9. table{border-collapse:collapse;border-spacing:;}
  10. table th,table td{border:1px solid #ddd;padding:5px;}
  11. table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
  12. img{border: none;width:auto\;max-width:%;vertical-align:top; height:auto;}
  13. button,input,select,textarea{font-family:inherit;font-size:%;margin:;vertical-align:baseline;}
  14. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
  15. button[disabled],input[disabled]{cursor:default;}
  16. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:;}
  17. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
  18. input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
  19. input:focus{outline:none;}
  20. select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:;}
  21. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
  22. audio,canvas,video,progress{display:inline-block;}
  23. body{background:#fff;}
  24. input::-webkit-input-speech-button {display: none}
  25. button,input,textarea{
  26. -webkit-tap-highlight-color: rgba(,,,);
  27. }

再次强调一下：·

需要根据你的设计稿的大小来调整脚本最后的两个参数。

  1. })(, );
  • 第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
  • 第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。

【推荐文章】

　　rem与em的介绍：https://www.imooc.com/article/15239

　　rem自适应布局：http://caibaojian.com/flexible-js.html

　　　　　　　　　　http://caibaojian.com/simple-flexible.html

　  rem实现手淘：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

 
 

rem自适应js的更多相关文章

  1. rem自适应js代码

    以后懒得写,直接复制了 var computedFz = (function(){ var designWidth = 375, rem2px = 100; function computedFz() ...

  2. Rem自适应js---flexible.min.js

    网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...

  3. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  4. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  5. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  6. rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  7. rem自适应原理

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  8. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  9. 通过rem自适应屏幕尺寸

    通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...

随机推荐

  1. Vue SSR: 基本用法 （二）

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...

  2. 运行ConnectionDemo时遇到的问题及解决方案

    20175227张雪莹 2018-2019-2 <Java程序设计> 运行ConnectionDemo时遇到的问题及解决方案 老师博客上提供确认数据库连接的代码 import static ...

  3. 【题解】P1171 售货员的难题

    Tags 搜索,状压​. 裸的旅行商问题 #include <stdio.h> #include <string.h> #define re register #define ...

  4. 好程序员分享ApacheSpark常见的三大误解

    误解一:Spark是一种内存技术 大家对Spark最大的误解就是其是一种内存技术(in-memorytechnology).其实不是这样的!没有一个Spark开发者正式说明这个,这是对Spark计算过 ...

  5. Oracle 执行计划（一）-------基本介绍

    本文参照自:https://www.cnblogs.com/Dreamer-1/p/6076440.html 打开SQL执行计划: 1.选中一句正在执行的SQL 2.F5快捷键,就会出现下图,这就是执 ...

  6. 多线程学习笔记-深入理解ThreadPoolExecutor

    java多线程中,线程池的最上层接口是Executor,ExecutorService实现了Executor,是真正的管理线程池的接口,ThreadPoolExecutor间接继承了ExecutorS ...

  7. mysql8 安装笔记

    环境 redhat6.8 ,官网下载 rpm x64 Bund 安装包 安装 rpm -ivh xxx.rpm 安装一系列的rpm. mysql 会创建 mysql 用户及组./etc/my.cnf ...

  8. 异常SRVE0199E

    后台生成导出exe表格,在tomcat自己环境下完全没问题到websphere环境下保SRVE0199E产生这个问题是因为response.OutputStream已经打开再次打开就报这个异常,前台如 ...

  9. ABP项目概述

    在系统性介绍整个ABP框架之前,我们首先需要对ABP框架有一个大概的了解,ABP框架的全称是:Asp.Net Boilerplate Project(即Asp.Net 的样板项目)顾名思义就是能够通过 ...

  10. 记录一下各个用过 IDE 以及 其他工具 的实用快捷键（持续更新）

    通用: win10锁屏:win + L win10查看服务:win+R,输入services.msc即可 Shift + Tab:多行缩进 Shift + Space:切换输入法 全/半角 Shift ...