前端 开发的适配中 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. Matlab绘图基础——绘制三维表面

    %绘制三维表面 ------------------------------------- %1.绘制线框图:mesh:每一条曲线称为mesh line %首先利用meshgrid函数产生平面区域内的 ...

  2. 第1次作业：no blog no fun

    1.先回答老师的问题 第一部分:结缘计算机       读了进入2012 -- 回顾我走过的编程之路后,我试着回顾了我的编程生涯的开始.我最原始的记忆就是老爸教我用电脑玩连连看,那时候的显示器应该是C ...

  3. C语言第二次作业

    一.PTA实验作业 题目1:7-1 计算分段函数[2] 1.实验代码 double x,y; scanf("%lf",&x); if (x>=0) { y=sqrt( ...

  4. Alpha冲刺Day4

    Alpha冲刺Day4 一:站立式会议 今日安排: 我们把项目大体分为四个模块:数据管理员.企业人员.第三方机构.政府人员.完成了数据库管理员模块.因企业人员与第三方人员模块存在大量的一致性,故我们团 ...

  5. 201621123027 《Java程序设计》第1周学习总结

    01621123027 <Java程序设计>第1周学习总结 1.本周学习总结 关键词:总概.承接.面向对象化 ​ 我认为第一周的Java学习是一些总结概括性质的内容,在比较联系之前学习过的 ...

  6. poj2029 Get Many Persimmon Trees

    http://poj.org/problem?id=2029 单点修改 矩阵查询 二维线段树 #include<cstdio> #include<cstring> #inclu ...

  7. OO前三次作业总结

    一.第一次作业 1.程序设计分析 ![img](s1.ax1x.com/2018/04/02/CSgoSU.png) 图1 第一次作业类图 ![name](https://images2018.cnb ...

  8. python全栈开发-Day13 内置函数

    一.内置函数 注意:内置函数id()可以返回一个对象的身份,返回值为整数. 这个整数通常对应与该对象在内存中的位置,但这与python的具体实现有关,不应该作为对身份的定义,即不够精准,最精准的还是以 ...

  9. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

  10. (转载) ASP.NET(C#) Web Api 通过文件流下载文件到本地实例

    下载文件到本地是很多项目开发中需要实现的一个很简单的功能.说简单,是从具体的代码实现上来说的,.NET的文件下载方式有很多种,本示例给大家介绍的是ASP.NET Web Api方式返回HttpResp ...