引用js,自动算字体大小,响应式布局

<script>
  var iScale = 1;
  iScale = iScale / window.devicePixelRatio;
  document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');

  /* 动态设置字体大小*/
  function htmlFontSizeChange() {
    var iWidth = document.documentElement.clientWidth;
    document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
    console.log("1rem = " + iWidth / 16);
  }
  htmlFontSizeChange();
  $(window).resize(function() {
    htmlFontSizeChange();
  });

</script>

<style>

  body{

    font-size:1rem; /*(16px)/(iWidth/16)  (iWidth设计图宽)*/

  }

</style>

示例

<!DOCTYPE html>
  <html>

  <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    var iScale = 1;
    iScale = iScale / window.devicePixelRatio;
    document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');

    /* 动态设置字体大小*/
    function htmlFontSizeChange() {
      var iWidth = document.documentElement.clientWidth;
      document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
      console.log("1rem = " + iWidth / 16);
    }
    htmlFontSizeChange();
    $(window).resize(function() {
      htmlFontSizeChange();
    });
  </script>
  <style>
  span {
    font-size: 0.21333333rem;
    /*设计图大小为1200,16/(1200/16)*/
    /*font-size: 16px;*/
  }

  div {
    width: 0.4rem;
    /*30/(1200/16)*/
    /*width: 30px;*/
    background: red;
    height: 0.4rem;
  }
  </style>
  </head>

  <body>
    <span>设计图宽度为1200</span>
    <div></div>
  </body>

</html>

直接使用css设置rem

html{

  font-size:62.5%; /* 10÷16=62.5% */

}

body{

  font-size:12px;

  font-size:1.2rem ; /* 12÷10=1.2 */

}

媒体查询

@media only screen and (min-width: 481px){

  html {

    font-size: 94%!important;/* 15.04÷16=94% */

  }

}

@media only screen and (min-width: 561px){

  html {

    font-size: 109%!important; /* 17.44÷16=109% */

   }

}

@media only screen and (min-width: 641px){

  html {

    font-size: 125%!important;/* 20÷16=125% */

  }

}

引用来自 http://www.520ued.com/article/53e98eafbb16a74c41b5de77

rem字体响应式布局的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  3. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  4. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  6. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  7. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  8. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  9. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

随机推荐

  1. 有关Asp.net 中数据请求的处理的新认知:利用httpHandlers

    转自csdn:HttpHandler    HttpHandler是HTTP请求的处理中心,真正地对客户端请求的服务器页面做出编译和执行,并将处理过后的信息附加在HTTP请求信息流中再次返回到Http ...

  2. NSQ的消息订阅发布测试

    在测试NSQ的Quick Start发现这样一个问题,就是同时只能有一个订阅实例 $ nsq_to_file --topic=test --output- 当存在两个实例时则消息会被发送给其中的一个实 ...

  3. redis 主从同步

    修改redis.conf配置文件 vi redis.conf 在编辑模式下 输入  /slaveof 来搜索 将slaveof启用 即 将#删除 依次配置所有 slave 并将进程 kill 掉 重启 ...

  4. HTTP权威协议笔记-5.Web服务器

    5.1 Web服务器工作内容 建立连接--接受一个客户端的连接,或者将其拒绝 接受请求--从网络中读取一条HTTP报文 处理请求--对请求报文进行解释,并采取行动 访问资源--访问报文中指定的资源 构 ...

  5. leetcode 6. ZigZag Conversion

    https://leetcode.com/problems/zigzag-conversion/ 题目: 将字符串转化成zigzag模式. 例如 "abcdefghijkmlnpq" ...

  6. 基于VLC的视频播放器(转载)

    最近在研究视频播放的功能,之前是使用VideoView.在网上看了一下,感觉不是很好,支持的格式比较少,现在网络视频的格式各种各样,感觉用VideoView播放起来局限性很大. 找到了一个比较合适的播 ...

  7. 《On Lisp》第四章第三节图4.3中的prune函数fix

    这个函数作者的原意是删除表中test位真的部分,并且表按原样返回. 作者给出的的测试用例如下: (prune #'evenp '(1 2 (3 (4 5) 6) 7 8 (9))) 返回结果是: (1 ...

  8. Java学习基础1

    Java 平台: Java API JVM  特点:可跨平台  Java 运行机制:           编译                         运行 Java文件-------> ...

  9. beautifulsoup小节

    在beautifulsoup中,一个tag可能有很多个属性. tag <b class="boldest"> 有一个 “class” 的属性,值为 “boldest” ...

  10. 关于使用READ TABLE语句的几点注意事项

    原文地址   http://www.dlsap.com/thread-34-1-1.html 1.  如果使用READ TABLE语句来读取内部表数据,而不是简单看返回值判断是否存在,那么在使用REA ...