整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
em 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} ，则 2rem=20px，通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小。
适配方案步骤：
1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项：
注意：
1、必须动态地去设置 html 的大小，才能适配
2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem 换算值是根据 psd 设计图的宽度/系数的 rem 系数以 640px 设计稿和 750px 的视觉稿，网易这样处理的：
这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem=1px * 0.01;
在 750px 设计稿上：
故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图
（2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份。
（2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算。
（2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，还要根据设计稿能整除的数。）
3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。
对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd设计稿的像素进行转换，即 1rem=设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem=1080/18=60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了。
特点：
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem
Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换
（3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置
（3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示：
弹性布局适配(会配合 rem 适配使用 )
兼容情况
IE10 及以上、ios9 及以上、android4.4 及以上版本支持
特点1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
2、父级加了这条属性，子级的 float、vertical-align 就会失效
3、如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性容器属性（父元素样式） 具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识。
（3.1）flex-direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着主轴旋转了 90 度）
（3.2）flex-wrap：换行方式
（3.3）flex-flow：以上两种方式的简写
（3.4）justify-content：水平对齐方式（子元素在主轴上的对齐方式）
（3.5）align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
（3.6）align-content：多行垂直对齐方式（多根轴线的对齐方式）
项目属性（子元素样式）
1、order：排列位置 //如果有两个的值是相等，按书写顺序排列
2、flex-grow：扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩余空间也不扩展。
剩余空间：剩余空间=父级的宽度-所有子元素的宽度和
注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度。
子元素宽度计算公式
子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的 flex-grow 属性值之和*子元素的 flex-grow 属性值+子元素初始宽度
3、flex-shrink：收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，就不会收缩。
超出空间：超出空间=所有子元素的宽度和-父级的宽度
子元素宽度计算公式
1、算出超出空间，所有子元素的宽度和-父级的宽度
2、子元素的初始宽度*子元素的 flex-shrink 值
3、算出第二步所有结果的和
4、每个子元素的第二步/第三步*第一步
5、子元素的初始宽度-第四步
flex-basis：元素的大小
flex：以上三个属性的简写
align-self：单独的垂直对齐方式（交叉轴方向上）
单阐述下px、em、rem之前的关系
为什么要选择rem？
px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。
em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了。
rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）。
以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。
下面来说说怎么更方便的使用rem和自己开文处提到的坑！
之前遇到的坑是这样的。浏览器默认的字体大小都是16px（注意这里），所以要使1rem=10px，那么只要在html选择器中声明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px单位进行换算，其实这个算法是没有错的。可是，哪里来的自信让每个浏览器默认字体都是16px？？？？反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px，那么问题来了，国内浏览器，有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%，1rem就等于10px的换算就有点坑爹了，对于我这种一个像素都纠结的人来说，很蛋疼。这坑是我当时买书学h5的时候预留下的后遗症，现在这个毛病还有，因为快和方便 T_T!真是矛盾。。。
因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值：比如在html选择器设置font-size：20px；那么1rem=20px（解释下为什么是20而不是其他的，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，进一步就取20px）；现在是不是和效果图一个像素都不差？！！！
且要兼容手机各个分别率，使用媒体查询media 可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。
这么换算来换算去好麻烦有木有！！所有发现了下面的换算工具，妈妈再也不用说我数学题不会做了！
下面是我直接在工具复制过来的现成rem换算适配代码↓（设计稿宽度：640，字体值：20）
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html,body {
font-size:16.875px;
}
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html,body {
font-size:15px;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html,body {
font-size:12.5px;
}
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html,body {
font-size:11.25px;
}
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html,body {
font-size:10px;
}
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html,body {
font-size:9.375px;
}
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html,body {
font-size:8.4375px;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html,body {
font-size:7.5px;
}
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html,body {
font-size:6.46875px;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html,body {
font-size:6.25px;
}
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html,body {
font-size:5.859375px;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html,body {
font-size:5.625px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html,body {
font-size:5px;
}
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html,body {
font-size:3.75px;
击右上方红色按钮关注“web秀”，让你真正秀起来！
em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem，根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。
web开发中该用 em 还是 rem 呢？
但问题是究竟该用 em 还是 rem 呢？关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 em 和 rem 和如何进行两者的选择，以及结合两者优势构建模块化的web组件。
em 是相对长度单位。它相对于当前元素字体尺寸，即font-size。举例来说，如果当前元素的字体是20px，那么当前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em=20px */
p { font-size: 16px } /* 1em=16px */
实际开发中，用相对长度单位（如 em）表示字体大小是WEB开发中的最好的选择。请看下面的代码：
h1 { font-size: 2em }
这里的h1元素字体大小究竟是多少呢？
这时，我们需要根据<h1>父元素字体的大小，来计算<h1>字体的尺寸大小。如果父元素是<html>，而且<html>的字体大小是16px。就可以计算出<h1>的字体大小是32px，即2*16px。
用代码表示如下：
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2=32px */
设置<html>字体的大小一般来说都不是一个好主意，因为这样重写了用户浏览器的默认设置。相反，可以使用百分比值或者根本不声明<html>字体大小
html { font-size: 100% } /* 缺省 16px */
对于大多数用户或浏览器，字体缺省大小是16px（未做浏览器缺省字体尺寸设置）。
em 还能用来指定除字体大小外的其它属性，象margin或padding等属性都可以用em来表示。
看下面的代码， 对于<h1>和<p>元素，margin-bottom值应该是多少？ （假设<html>的字号被设置为100％）
h1 {
font-size: 2em; /* 1em=16px */
margin-bottom: 1em; /* 1em=32px */
}
p {
font-size: 1em; /* 1em=16px */
margin-bottom: 1em; /* 1em=16px */
}
上述<h1>和<p>的margin-bottom都是1em，但是外边距结果值却不相同。上述现象的出现，是因为em是相对于当前元素字体的大小。由于<h1>中的字体大小现在设置为2em， 因此<h1>中其它属性的1em值就是 1em= 32px。这里比较容易引起误解的地方。
rem表示 root em，它是相对于根元素的长度单位。这里根元素就是<html>中定义的字体大小。这意味着任何地方的1rem总是等于<html>中定义的字体大小。
利用上述相同的代码，我们用 rem 来代替 em，查看margin-bottom的计算值究竟是多少？
h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem=16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem=16px */
}
如上述代码所示，1rem总是等于16px（除非变更了<html>字体的大小）。rem的大小相较于em来说意义更直接明确，也很容易理解。
在项目开发中究竟是选用 rem 还是 em 一直以来争议不断。一些开发人员不使用rem，因为rem使组件不那么模块化。而另一些开发人员喜欢rem的简单性，使用rem处理所有元素。
其实 em和rem都有各自的优势和劣势，在实际项目开发中，应该结合使用两者，利用各自的优势，从而实现较好代码质量和显示效果。
那么在具体的应用中如何在两者中做选择呢？有两条简单的指导原则：
上述规则太简单了。 为了更好的理解上述规则，我们就以一个简单的header组件为例，说明单独使用两者来实现组件遇到的问题，并体会结合使用两者所带来的优势。
这里我们只使用rem来编写一个header组件，代码及运行结果如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
web开发中该用 em 还是 rem 呢？
接下来，网站需要一个尺寸更大的header组件。变更CSS代码如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
web开发中该用 em 还是 rem 呢？
从上述运行结果可以看出，文字的内边距（padding）过小，显示效果不协调。如果我们坚持只使用rem，只能变更css代码如下:
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}
web开发中该用 em 还是 rem 呢？
上述代码及运行结果，虽然达到了预期的显示效果，但却违背了代码复用的原则。如果网站有多种尺寸的.header样式，就要多次重复的定义内边距。重复的代码增加了项目复杂度，降低了可维护性。
这时可以利用em可以变更上述代码如下：
.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
当元素属性值的大小需要根据元素字体尺寸缩放时，就应该应用 em 来定义属性尺寸。这就是前述规则中的第一条规则。
如果只使用em来定义上述组件，结果会怎样呢？
我们变更上述代码如下（em替换rem）：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
p {
padding: 0.5em 0.75em;
}
为更接近实际，我们引入了<p>元素，并变更html代码如下：
div class="header header-large">名人名言</div> <p>简单是稳定的前提</p> <div class="header">名人名言</div> <p>简单是稳定的前提</p>
web开发中该用 em 还是 rem 呢？
从上述运行经果中，不难看出.header-large部分的标题并没有和文本左对齐。而如果只使用em实现左对齐，则需要变更CSS代码如下：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
padding-left: 0.375em;
padding-right: 0.375em;
}
web开发中该用 em 还是 rem 呢？
上述代码及运行结果，虽然达到了预期的显示效果，但却违背了代码复用的原则。如果网站有多种尺寸的.header样式，就要多次重复的定义左右边距。重复的代码增加了项目复杂度，降低了可维护性。
解决上述问题的办法是结合使用em和rem，即使用em定义上下边距，使用rem定义左右边距。变更后代码如下：
.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
究竟是该使用em还是rem呢？答案应该是结合使用rem和rem。当属性值的大小需要根据当前元素字体尺寸缩放时，就选用em，其它的情况都使用更简单的rem。
最后提供小技巧：em及rem值的设定
em和rem 属性值都要经过计算转化成绝过长度单位。常用的字体尺寸用相对长度单位表示会很困难。看下面常用字体值的rem表示（基本字体尺寸是16px）：
如上述列表所示，上述尺寸值的表示及计算都不分的不便。为了解决上述问题要用到一个小技巧，即著名的 "62.5%"技术。具体请查看下述代码：
body { font-size:62.5%; } /*=10px */
h1 { font-size: 2.4em; } /*=24px */
p { font-size: 1.4em; } /*=14px */
通过62.5%的设定，就可以很容易用em来定义具体属性的尺寸了（10倍的关系）。
而rem，则需要采用如下的方式：
*请认真填写需求信息，我们会在24小时内与您取得联系。
