前端 开发的适配中 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. java 函数初始化作用

    本人小白一枚,看java类的初始化的时候好晕的说,我觉着书上尽管说的对.但总认为有些信息没说出来,没说清楚,看了好多文章博客的,如今有些感悟,来小写下总结,也算是为以后再次复习种个好果子. 先摘一下书 ...

  2. java开发常用技术

    基础部分 1. 线程和进程的区别 线程三个基本状态:就绪.执行.阻塞 线程五个基本操作:创建.就绪.运行.阻塞.终止 进程四种形式:主从式.会话式.消息或邮箱机制.共享存储区方式 进程是具有一定功能的 ...

  3. [日常] Codeforces Round #440 Div.2 大力翻车实况

    上次打了一发ABC然后大力翻车...上午考试又停电+Unrated令人非常滑稽...下午终于到了CF比赛... 赛前大力安利了一发然后拉了老白/ $ljm$ / $wcx$ 一起打, 然后搞了个 TI ...

  4. （译文）React----React应用程序流式服务端渲染

    好处 React16推出了流式服务端渲染,它允许你并行地分发HTML片段.这样可以让渲染 出的首字节有意义的内容给用户速度更快. (例子1,上面部分是一次性转换,下面是流渲染,两种方式) 而且相对re ...

  5. 使用MVC5+Entity Framework6的Code First模式创建数据库并实现增删改查功能

    此处采用VS2017+SqlServer数据库 一.创建项目并引用dll: 1.创建一个MVC项目 2.采用Nuget安装EF6.1.3 二.创建Model 在models文件夹中,建立相应的mode ...

  6. 张金禹 C语言--第0次作业

    1:在填报专业的时候,我也犹豫了很久,但最后还是选择了计算机专业.因为在上大学之前我就对编程.设计等有浓厚的兴趣,但繁重的高中学习任务使我没有过多的去关注,所以我选择了计算机专业去培养我在这方面的兴趣 ...

  7. 201621123031 《Java程序设计》第11周学习总结

    作业11-多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread ...

  8. java方法的定义格式

    Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,声明格式为: [修饰符1  修饰符2  …..] 返回值类型  方法名( 形式参数列表 ){ Java 语句;… … … } 例如 ...

  9. poj2029 Get Many Persimmon Trees

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

  10. day-6 机器学习概念及应用

    学习玩Python基础语法,今天开始进行机器学习,首先了解下机器学习和深度学习的一些基本概念和术语: 1.  机器学习概念及应用 2.  深度学习概念及应用 3.  机器学习基本术语及举例 4.  机 ...