前端 开发的适配中 rem 有着举足轻重的位置，用好了，你就是神，用不好 ，直接GG；不好懵懵懂懂，要头头是道。

言归正传：

　　首先我们需要了解，css 布局的单位常用的有一下几种：

　　　　1、px (pixel，像素)

　　　　2、pt (point，磅)：指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

　　　　3、em(相对长度单位) 继承父级fontSize大小或相对于当前对象内文本的字体尺寸 ：通常1em=16px。

<div style="font-size:14px;>

      14px的字体

   <p style="font-size:1em;">

       1em = 14px 的字体

   </p>

</div>

　　　　4、rem(相对长度单位)  相对的是 文档根节点的font-size大小

　　　　　 两种换算方法：

　　　　　　　　　不要忘了先设置header标签：

　　　　　　　　　　　　<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

　　　　　　　　　百分比设法：

　　　　　　　　　　　　计算规则： 百分数 = 基数 / 16

　　　　　　　　　　　　基数  10 ==> 62.5%

　　　　　　　　　　　　　　  14 ==> 87.5%

　　　　　　　　　　　　换算公式为：

　　　　　　　　　　　　　　  X rem = 你测量出来的 px 值 / 基数

　　　　　　　　　　　　　　  下面的例子：

　　　　　　　　　　　　　　　28px / 14 ==> 2rem;

<!DOCTYPE html>

<html style="font-size:87.5%">

<head>

    <title></title>
　　<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

</head>

<body style="font-size:2rem;">

<div style="width: 10rem;height: 10rem ;background: red">

    <span>基准是 14px; 2rem ==> 28px </span>

</div>

</body>

</html>

坑！！！！！！！预警

如果你用的chrome 浏览器  他的最小字体12px 以及 最小高度都有最小值得限制 这样会导致 你用 基数为10的进行计算时   没效果！！！这是浏览器问题！！！！　

　　　　　　　　　　

　　　　　　　相对px写法　　　　　　　　　　　　　

 

var d = document.documentElement;  //拿到根元素

var cw = d.clientWidth || 640;     // 获取默认屏幕宽度  默认是 640px的宽度

d.style.fontSize = (20 * (cw / 320)) > 40 ? 40 + 'px' : (20 * (cw / 320)) + 'px';  限制最小字体的大小 /最小20px 最大 40px

如何你字体大小问 为什么要被限制？？？ 那么我只能说你问的 很好

答案： 就chrome 浏览器而言 有最小字体的限制 为避免这种尴尬局面的出现，设置最小20px.   最小数值的限制最小数值的限制最小数值的限制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <script type="text/javascript">

        //第一种

        var d = document.documentElement;  //拿到根元素

        var cw = d.clientWidth || 640;     // 获取默认屏幕宽度  默认是 640px的宽度

        d.style.fontSize = (20 * (cw / 320)) > 40 ? 40 + 'px' : (20 * (cw / 320)) + 'px';  //限制最小字体的大小 /最小20px 最大 40px

        //第二种 (简单粗暴)

        document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

    </script>

</head>

<body style="margin: 0 ;padding: 0;font-size: 0.32rem">

<div style="width: 3.2rem;height: 3.2rem ;background: red">

    <span>danny.xie</span> //实际的宽度计算就是 x rem = 测量的宽度PX / 动态设置的font-siz值

</div>

</body>

</html>

这就今天分享的重点了 有不足 或 错误的地方 欢迎指正  ~~~ 谦虚使人进步

　　　　

rem ~~ 你懂了吗？的更多相关文章

  1. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  2. 如何更愉快地使用rem —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  3. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  4. 彻底弄懂响应式设计中的em和rem

    前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下. rem是指:根元素(root element,html)的字体大小, em是指:父元素的字 ...

  5. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  6. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  7. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  8. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  9. 彻底弄懂css中单位px和em，rem的区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

随机推荐

  1. Tomcat服务器简单测试jsp文件和html文件

    在tomcat里面的webapps文件夹下面新建一个test文件, 写一个test.html的文件,一个test.jsp的文件,两个文件的内容全是:2+2=<%=2+2%> 重新启动Tom ...

  2. ORACLE 监听

    今天来学习一下监听的相关内容,昨晚被老大问了两个关于监听很简单的问题,但是却吞吞吐吐回答,而且有一个问题还答错了,刚刚查了下资料,才发现"驴头对了马嘴",哭笑不得. 一.监听(li ...

  3. Java读取word中表格

    因为要新建一个站,公司要把word表格的部分行列存到数据库中.之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库 ...

  4. Welcome to StackEdit!

    Welcome to StackEdit! Hey!our first Markdown document in StackEdit1. Don't delete me, I'm very helpf ...

  5. 2017-2018-1 20155215 第九周 加分项 PWD命令的实现

    1 学习pwd命令 Linux中用 pwd 命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pw ...

  6. PHP、Java、Python、C、C++ 这几种编程语言都各有什么特点或优点

    PHP.Java.Python.C.C++ 这几种编程语言都各有什么特点或优点 汇编: C: Java: C#: PHP: Python: Go: Haskell: Lisp: C++: &l ...

  7. DES MEI号码加密

    对于加密来说,使用DES加密解密很好,但是为了使不同设备的密文不一样,可以使用 固定字符串 + 设备IMEI号码 加密的方式,这样可以分辨不同手机,限制手机的使用(若是注册,一个手机只有一个IMEI号 ...

  8. 【iOS】swift-通过JS获取webView的高度

     let webHeightStr = webView.stringByEvaluatingJavaScriptFromString("document.body.scrollHeight& ...

  9. hibernate.QueryException: ClassNotFoundException: org.hibernate.hql.ast.HqlToken

    环境:weblogic10.3.5,hibernate3,GGTS(groovy/grails tools suite):出现这问题是因为该项目是从weblogic8.1.6下移植到weblogic1 ...

  10. Hibernate与mysql的对应类型

    Hibernate映射类型 Java类型 标准SQL类型  integer  java.lang.Integer  integer  long  java.lang.Long  bigint  sho ...