前端 开发的适配中 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. Nginx 开启gzip 压缩，实现基于域名的虚拟主机。

    一:gzip(GNU-ZIP)是一种压缩技术. 经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多. gzip 的压缩页面需要浏览器和服务器双方都支持,实际上 ...

  2. Ubuntu16.0.4的磁盘管理

    ubuntu下硬盘无损分区移动修改工具 原创 2014年04月13日 :: ubuntu上面其实有很好的分区调整工具,gparted,非常好使用 安装非常简单 sudo apt-get install ...

  3. linux小白成长之路3————更新yum源

    [内容指引] 进入目录:cd 查看目录下的内容:ls 重命名备份:mv 从网络下载:wget yum更新:yum update 第一次运行yum安装软件前,建议更新yum. 1.进入yum源目录 命令 ...

  4. Win调整和小技巧

    推荐win下一些个人爱用的工具软件(以及使用心得)和一些系统调整方法,让win下不尽人意的设置发生小小变化,让整天摸着电脑的ITer们的生活更有乐趣. 本人酷爱收集一些好用的软件,若各位也对某个或某些 ...

  5. Java并发编程实战（chapter_2）（对象发布、不变性、设计线程安全类）

    一.发布与溢出 "发布(Publish)"一个对象的意思是指,使对象能够在当前作用于之外的代码中使用.这个"之外",尤为关键,各种出问题的地方,都是因为这个&q ...

  6. TED - How To Get Better At The Things You Care About

    TED01 - How To Get Better At The Things You Care About 昨天我发布了攻克英语口语的宣言,今天就行动.TED是我们学习口语的好地方,本着学以致用的原 ...

  7. 20145237《Java程序设计》第一周学习总结

    教材学习内容总结 java可分为Java SE.Java EE.Java ME三大平台. java SE分为JVM.JRE.JDK.与java语言四个部分. JRE包括java SE API和JVM. ...

  8. cpp常用函数总结

    //sprintf sprintf(temp_str_result, "%lf", temp_double); result = temp_str_result; (*begin) ...

  9. Tornado 协程

    同步异步I/O客户端 from tornado.httpclient import HTTPClient,AsyncHTTPClient def ssync_visit(): http_client ...

  10. openlayers调用瓦片地图分析

    网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图,本文作者使用的是不是常见的互联网瓦片,现将调用过程进行整理与大家分享. 首先,openlayers就不赘述了(官网: ...