功能说明：以一个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. Nginx + CGI/FastCGI + C/Cpp

    接着上篇<Nginx安装与使用>,本篇介绍CGI/FASTCGI的原理.及如何使用C/C++编写简单的CGI/FastCGI,最后将CGI/FASTCGI部署到nginx.内容大纲如下: ...

  2. [PCB制作] 1、记录一个简单的电路板的制作过程——四线二项步进电机驱动模块（L6219）

    前言 现在,很多人手上都有一两个电子设备,但是却很少有人清楚其中比较关键的部分(PCB电路板)是如何制作出来的.我虽然懂点硬件,但是之前设计的简单系统都是自己在万能板上用导线自己焊接的(如下图左),复 ...

  3. sonne_game网站开发02spring+mybatis框架搭建

    从最开始搭框架谈起,而且,我不仅仅会讲how,还会努力讲why.因为对于web开发,由于有太多好的框架.组件.工具,使得how往往不是那么深刻,背后的why更值得专研.如果有初学者关注我这个系列,也一 ...

  4. Axis 1 https(SSL) client 证书验证错误ValidatorException workaround

    Axis 1.x 编写的client在测试https的webservice的时候, 由于client 代码建立SSL连接的时候没有对truststore进行设置,在与https部署的webservic ...

  5. Java-面向对象基础练习

    1．编写一个Java应用程序,该应用程序包括2个类:Print类和主类E.Print 类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数(各位数字的 立方和等于这个三位数本身 ...

  6. EF架构~CodeFirst数据迁移与防数据库删除

    回到目录 本文介绍两个概念,防数据库自动删除,这是由于在code first模式下,当数据实体发生变化时,会对原来数据库进行删除,并将新数据表添加进来,但这对于我们的运营环境数据库,是万万不能接受的, ...

  7. Atitit 编程语言原理与概论attilax总结 三大书籍总结

    Atitit 编程语言原理与概论attilax总结 三大书籍总结 编程语言原理(第10版) 目录: 第1章 预备知识第2章 主要程序设计语言的发展第3章 描述语法和语义第4章 词法分析和语法分析第5章 ...

  8. 深度解析SDN——利益、战略、技术、实践（实战派专家力作，业内众多专家推荐）

    深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编   ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...

  9. salesforce 零基础学习（三十三）通过REST方式访问外部数据以及JAVA通过rest方式访问salesforce

    本篇参考Trail教程: https://developer.salesforce.com/trailhead/force_com_dev_intermediate/apex_integration_ ...

  10. salesforce 零基础学习（二十五）PickList简单联动操作

    有的时候,项目需要一些联动的操作,比如省和市之间的联动,不同的省应该显示不同的城市. 操作步骤如下: 1.新建provice字段,并且初始化相关的值 2.新建city字段,并且初始化相关的值 3.在P ...