功能说明：以一个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. [Unity3D入门]入门级游戏项目"坦克狙击手"更新

    [Unity3D入门]入门级游戏项目"坦克狙击手"更新 在上一篇中我分享了一个尚未完全写好的入门级unity3d项目"坦克狙击手". 本文介绍最新版的" ...

  2. js笔记——理解js中的call及apply

    call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...

  3. 关于python的最大递归层数详解

    在阅读http://www.cnblogs.com/skabyy/p/3451780.html这篇文章的时候,实验yield的流式迭代素数的时候发现有个问题,故详细记录下来. 首先来看看python默 ...

  4. 《鸟哥的linux私房菜》 - linux命令温故而知新

    在公司的某角落里,看到了<鸟哥的linux私房菜>,顿时想看看是什么鬼. 其他时候还要自己去买才有,现在正好,比图书馆方便.看完了,写点啥! 编辑器很重要,一个vim就主要是我的使用方向: ...

  5. 学习ASP.NET MVC(五)——我的第一个ASP.NET MVC CURD页面

    在上一篇文章中我们已经创建了实体类,在这一篇文章中,我将创建一个新的控制器类——BookController,使用BookController对Books表中的数据进行CURD操作的方法,并使用视图模 ...

  6. 阿里云上安装mysql步骤/ 阿里云ECS搭建Java+mysql+tomcat环境

    使用阿里云ECS挺长一段时间了.这两天碰巧朋友小白让我一步一步教他在ECS上搭建Java+mysql+tomcat环境,所以把在这里把步骤在这简单整理了一下,以便需要的人查阅. 我购买的阿里云服务器系 ...

  7. mysql如果数据不存在，则插入新数据，否则更新的实现方法

    mysql如果数据不存在,则插入新数据,否则更新的实现方法 //如果不存在,则插入新数据 $sql = "INSERT INTO {$ecs->table('cat_lang')} ( ...

  8. Windows 10 开始菜单修改程序

    Windows 10虽然恢复了开始菜单,但与经典的菜单相比还是有些变化.对于菜单项中名称过长的只能显示一部分,比如SQL Server Management Studio这种名称比较长的菜单项名称,常 ...

  9. 数据类型，隐式转换以及json，对象，引用类型，预解析 视频教程

    随便看看,需要有一点一点基础. 链接:http://pan.baidu.com/s/1c20pcOC 密码:xq2x

  10. .NET面试题解析(01)-值类型与引用类型

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 常见面试题目: 1. 值类型和引用类型的区别? 2. 结构和类的区别? 3. delegate是引用类型还 ...