功能说明：以一个640px的宽度为基准，最小不低于320px，当大于640px时，让其在页面中居中。

　　　　　如果正处于640 - 320之中的，都按照js进行等比例的缩放。

　　　　　这里我们规定1rem = 100px

--------------------------------------------------------------------------------------------------------

代码：

     function Rem(){
         var radio = function(){
             var r = document.documentElement.clientWidth / 6.4;
             return r>=100?100:r<=50?50:r;
         }
         document.documentElement.style.fontSize = radio() +'px';
         window.addEventListener('resize',Rem,false);
     }

调用代码：

Rem();

应用举例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" id="viewport" content="width=device-width" />
      <title>phone</title>
      <script>
         function Rem(){
             var radio = function(){
                 var r = document.documentElement.clientWidth / 6.4;
                 return r>=100?100:r<=50?50:r;
             }
             document.documentElement.style.fontSize = radio() +'px';
             window.addEventListener('resize',Rem,false);
         }
         Rem();
      </script>
      <style>
          *{margin:0px;padding:0px;list-style:none;}
          .wrap{width:100%;max-width:640px;min-width:320px;margin:0px auto;}
          .box,.box ul{width: 100%;background:#eee;}
          .box li{width: 1rem;height: 1rem;background:red;margin:0px auto;}
      </style>
  </head>
  <body>
      <div class="wrap">
          <div class="box">
              <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </div>
      </div>
  </body>
  </html>

手机端布局 - rem计算的更多相关文章

  1. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  2. 手机端布局，rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  5. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  6. flex 实例 豆瓣手机端布局实现

    0.最终成品

  7. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  8. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. rem自适应手机端布局

    通过js根据屏幕设备尺寸的大小,改变根元素的值: <script> var html = document.querySelector("html"); var rem ...

随机推荐

  1. 我的ORM之九 -- 生成器

    我的ORM索引 数据库连接字符串格式 <add name="dbo" connectionString="" providerName="MyS ...

  2. System.load(String filename)和System.loadLibrary(String libname)的区别

    前言 之前一篇文章在写Native方法的时候,第一个步骤里面有这么一段代码 static { System.load("D:" + File.separator + "H ...

  3. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  4. Nightmare基于phantomjs的自动化测试套件

    今天将介绍一款自动化测试套件名叫nightmare,他是一个基于phantomjs的测试框架,一个基于phantomjs之上为测试应用封装的一套high level API.其API以goto, re ...

  5. Redis总结笔记（二）：C#连接Redis简单例子

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/113.html?1455860686 注:C#在调用Redis是不要使用S ...

  6. 说说设计模式~策略模式(Strategy)

    返回目录 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.而对于客户端(UI)来说,可以通过IOC再配合工厂模块,实现动态策略的切换,策略模块通常于一个抽象策略对象(in ...

  7. Atitit usrQBK1600 技术文档的规范标准化解决方案

    Atitit usrQBK1600 技术文档的规范标准化解决方案 1.1. Keyword关键词..展关键词,横向拓展比较,纵向抽象细化拓展知识点1 1.2. 标题必须有高大上词汇,参考文章排行榜,1 ...

  8. iOS-数据解析XML解析的多种平台介绍

    在iPhone开发中,XML的解析有很多选择,iOS SDK提供了NSXMLParser和libxml2两个类库,另外还有很多第三方类库可选,例如TBXML.TouchXML.KissXML.Tiny ...

  9. Android WebView 总结 —— Java和JavaScript交互

    交互如何实现 实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互接口. 客户端和网页端编写调用对方 ...

  10. mvc 权限设计

    1.http://blog.csdn.net/vera514514/article/details/8285154 2.http://www.cnblogs.com/cmsdn/p/3433995.h ...