功能说明：以一个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. 【转】Backbone标准例子——通讯录

    参考:http://z2009zxiaolong.iteye.com/blog/1847833 感觉不错的例子,模型.视图.路由等知识点都用到了:),将此文中的源码转载如下: http://dmyz. ...

  2. 解决Win7 软件图标不显示--Win7图标异常，快捷方式不显示解决方法

    电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可.   将下面的内容复制到记事本保存为“Repai ...

  3. Java多线程系列--“JUC锁”07之 LockSupport

    概述 本章介绍JUC(java.util.concurrent)包中的LockSupport.内容包括:LockSupport介绍LockSupport函数列表LockSupport参考代码(基于JD ...

  4. FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能

          前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...

  5. Unity多单位战斗寻路问题的一种解决办法

    Unity多单位战斗寻路问题的一种解决办法 Unity提供了NavMesh 导航组件   NavMesh是在实践中通用性最好的一种导航方式,但是Unity的实现并没有完全提供一个开放自由的API. 主 ...

  6. ubuntu 13.04下MYSQL 5.5环境搭建

    解决的问题: 安装mysql server和mysql client 5.5 新建远程账户 远程访问权限 MYSQL默认字符集修改为UTF8 检查防火墙 一.安装 BTW:可以使用查找命令查看安装包 ...

  7. C#将dll打包到程序中

    最近比较懒,加上内容也不多就懒得排版了,字放大了,看起来应该方便一点 直接进入主题 先来看一个栗子,假设现在有一个第三方dll namespace TestLibrary1 { public clas ...

  8. 关于stm32的正交解码

    关于正交解码,我先解释何为正交解码,,,,其实名字挺高大上的,,,,还是先说编码器吧 看一下我用过的一种编码器 编码器的 线 数 ,是说编码器转一圈输出多少个脉冲,,,如果一个编码器是500线,,,说 ...

  9. web工作流

    web工作流之Gulp学习 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你 ...

  10. js中如果省略分号那么它是如何运行的

    在javascript工作中,我们几乎不会去省略分号:为了不必要的麻烦以及代码的规范,那么如果我们省略:会发生呢?预知详情请听下回分解. 看代码! 片段一: 1 var a 2 = 3 8 4 con ...