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

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

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

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

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

代码如下:

//designWidth:设计稿的实际宽度值，需要根据实际设置

//maxWidth:制作稿的最大宽度值，需要根据实际设置

//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)

;(function(designWidth, maxWidth) {

    var doc = document,

    win = window,

    docEl = doc.documentElement,

    remStyle = document.createElement("style"),

    tid;

    function refreshRem() {

        var width = docEl.getBoundingClientRect().width;

        maxWidth = maxWidth || ;

        width>maxWidth && (width=maxWidth);

        var rem = width *  / designWidth;

        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

    }

    if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(remStyle);

    } else {

        var wrap = doc.createElement("div");

        wrap.appendChild(remStyle);

        doc.write(wrap.innerHTML);

        wrap = null;

    }

    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

    refreshRem();

    win.addEventListener("resize", function() {

        clearTimeout(tid); //防止执行两次

        tid = setTimeout(refreshRem, );

    }, false);

    win.addEventListener("pageshow", function(e) {

        if (e.persisted) { // 浏览器后退的时候重新计算

            clearTimeout(tid);

            tid = setTimeout(refreshRem, );

        }

    }, false);

    if (doc.readyState === "complete") {

        doc.body.style.fontSize = "16px";

    } else {

        doc.addEventListener("DOMContentLoaded", function(e) {

            doc.body.style.fontSize = "16px";

        }, false);

    }

})(, );

使用方法：·

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

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

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

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

已经找到兼容方案，可通过js在页面的head里生成定义了html元素font-size的style元素来解决！

如下：

<style id="rootFontSize">html{font-size: 100px !important;}</style>

注意还加了important来提高权重

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

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

基本的HTML模板·

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<meta name="description" content="不超过150个字符"/>

<meta name="keywords" content=""/>

<meta content="caibaojian" name="author"/>

<title>前端开发博客</title>

<link rel="stylesheet" href="base.css">

<script type="text/javascript">

//引入该flexible.min.js

!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"},!)}(,);

</script>

</head>

<body>

    <!-- 正文 -->

</body>

</html>

base.css:

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:;padding:;}

ul,ol{list-style:none;}

a{text-decoration:none;}

html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}

body{line-height:1.5; font-size:14px;}

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;}

b,strong{font-weight:bold;}

i,em{font-style:normal;}

table{border-collapse:collapse;border-spacing:;}

table th,table td{border:1px solid #ddd;padding:5px;}

table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}

img{border: none;width:auto\;max-width:%;vertical-align:top; height:auto;}

button,input,select,textarea{font-family:inherit;font-size:%;margin:;vertical-align:baseline;}

button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}

button[disabled],input[disabled]{cursor:default;}

input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:;}

input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}

input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}

input:focus{outline:none;}

select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:;}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}

audio,canvas,video,progress{display:inline-block;}

body{background:#fff;}

input::-webkit-input-speech-button {display: none}

button,input,textarea{

-webkit-tap-highlight-color: rgba(,,,);

}

再次强调一下：·

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

})(, );
  • 第一个参数是设计稿的宽度，一般设计稿有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---flexible.min.js的更多相关文章

  1. spring访问静态资源出错，No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  2. express 项目前后台公用样式 /static/js/bootstrap.min.js

    express  项目前后台公用样式 /static/js/bootstrap.min.js

  3. $.getScript("/Scripts/js/video.min.js");

    js内引用JS: $.getScript("/Scripts/js/video.min.js");

  4. wow.js wow.min.js animate.css animate.min.css

    奉献给下载不到源码的小伙伴,下载到的请忽视 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, ge ...

  5. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  8. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  9. webuploader.min.js 简单例子

    一个百度开发的开源框架 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html& ...

随机推荐

  1. 洛谷P2805 植物大战僵尸

    题意:给你一张图,每个节点保护若干节点. 当一个节点不被保护的时候,你就可以gay掉它. gay每个节点都有收益(可能为负),求最大总收益. 解:首先发现是一个最大权闭合子图. 把保护关系变成被保护, ...

  2. 洛谷P2486 染色

    LCT的一种姿势. 题意:给定一棵树.每次把一条路径上的点染成一种颜色,求一条路径上有多少段颜色. 解: 首先可以很轻易的用树剖解决,只不过代码量让人望而却步... 有一种难以想象的LCT做法... ...

  3. 同一台机器安装多个zabbix-agentd

    先来看一zabbix-agentd rpm包安装生成的文件   有的机器之前安装过老版本的,我这边就直接将这些配置文件打包到一个文件夹,然后上传到对应的机器上解压一下修改配置文件就ok啦 改一下启动脚 ...

  4. PHP和PHP-FPM 配置文件优化

    前言:乘着这次空闲,来记录下关于PHP和PHP-FPM配置文件的优化,也方便以后自己复习. 先说PHP的 1.PHP脚本执行时间 max_execution_time = 30 该选项设定PHP程序的 ...

  5. python之网络编程--锁、信号量、线程、队列

    一.线程,可以发现顺序执行比开线程执行时间要短.原因是,一个进程中的多线程处理,由于存在GIL,并且GIL中只能存在一个线程,加上线程又存在切换的问题,所以时间耗得多.想要解决这个问题,是开几个进程, ...

  6. plink提取指定样本的数据（keep函数）

    提取样本见命令行: plink --bfile file --noweb --keep sampleID.txt --recode --make-bed --out sample 其中,sampleI ...

  7. Myeclipse启动报错：An error has occurred.See the log file

    出现这个问题是因为断电前myeclipse还在运行,日志报错如下: !ENTRY org.eclipse.osgi 4 0 2017-07-24 08:29:48.485 !MESSAGE An er ...

  8. node(基础)_node中的javascript

    一.前言                                                                                                 ...

  9. linux c 编程 ------ 头文件及其作用

    #include <stdio.h> printf #include <sys/types.h> 基本系统数据类型.系统的基本数据类型在32编译环境中保持为32位值,在64编译 ...

  10. 配置taBar所遇见的问题（踩坑之路）

    目前效果图: 问题:我遇见一个问题,点击每周关注的时候,他应该跳转到哪一个页面.在没有设置taBar还是可以跳转的. 解决方法是: 修改 open-type='navigate'为switchTab( ...