功能说明：以一个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. Java IO1：IO和File

    IO 大多数的应用程序都要与外部设备进行数据交换,最常见的外部设备包含磁盘和网络.IO就是指应用程序对这些设备的数据输入与输出,Java语言定义了许多类专门负责各种方式的输入.输出,这些类都被放在ja ...

  2. Asp.net下使用HttpModule模拟Filter，实现权限控制

    在asp.net中,我们为了防止用户直接从Url中访问指定的页面而绕过登录验证,需要给每个页面加上验证,或者是在模板页中加上验证.如果说项目比较大的话,添加验证是一件令人抓狂的事情,本次,我就跟大家分 ...

  3. 使用ViwePager显示图片时如何防止内存泄露。

    内存泄露的检测. 1. 在Android Studio中运行你的应用,然后切换到输出窗口的Android tab. 2. 尽情的玩耍你的应用,最好各个功能都用到,如果是Viewpager,则多滑动一些 ...

  4. 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. MFC CString::GetBuffer() 内存数据异常

    问题描述 在项目中的一个文件路径存储在CString的对象中,这个对象在函数间传递了几次,当传递出来的时候,因为要使用到字符指针,所以GetBuffer获取字符串的指针,但是通过调试,发现,CStri ...

  6. 为什么PCB上的单端阻抗控制50欧姆

    很多刚接触阻抗的人都会有这个疑问,为什么常见的板内单端走线都是默认要求按照50欧姆来管控而不是40欧姆或者60欧姆?这是一个看似简单但又不 好回答的问题.在写这篇文章前我们也查找了很多资料,其中最有知 ...

  7. 实现两个MySQL数据库之间的主从同步

    一.    概述MySQL从3.23.15版本以后提供数据库复制(replication)功能,利用该功能可以实现两个数据库同步.主从模式.互相备份模式的功能二.    环境操作系统:Linux 2. ...

  8. Docker镜像

    docker镜像123? 额,由于没有实验环境,没有亲手实践,因此理解可能有不对的地方. 反正也是学习笔记,以后再修改吧... docker的镜像跟virtualbox的镜像不一样.在虚拟机中,镜像是 ...

  9. Atitit  发帖机实现(1)-----UsrQBm2008 页面上下文规范

    Atitit  发帖机实现(1)-----UsrQBm2008 页面上下文规范 1.1. 网站绝对路径,页面绝对路径1 1.2. Java的javax.servlet.ServletContext1 ...

  10. DNS正向解析与反向解析

    DNS:(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网, 而不去记住能够被机器直接读取的IP数串.通过主机名,最 ...