摘要：关于与的区别，网上已经有不少文章了，在此不多谈。主要想谈的是在制作网页时，什么时候设定字体大小用，什么时候用先谈结论，再讲为什么。一般情况下，还是以用为主，只有当需要在不同设备上显示不同大小的字体时，再用。
关于rem与px的区别，网上已经有不少文章了，在此不多谈。主要想谈的是：在制作网页时，什么时候设定字体大小用px，什么时候用rem？
先谈结论，再讲为什么。一般情况下，还是以用px为主，只有当需要在不同设备上显示不同大小的字体时，再用rem。
举个极端例子，一个网页，需要在最大屏幕3000px(为了方便起见，我们这里只谈屏幕宽度)上显示，同时也需要在最小屏幕320px上显示。不管屏幕多大，人的肉眼能看清楚的字体大小都是16px（我们只是假设，也可以是14px甚至12px，但先假设为16px）。通常情况下，把字体大小设置为16px是没有问题的，这样的话，在小屏幕上，一行能显示20个汉字，大屏幕上一行能显示200个汉字，多少没关系，多了就自动换行呗，无非就是大屏幕上看起来文章较短，而小屏幕上看起来文章较长，但人的眼睛都能看得清，这是没有问题的。
但是有时候这里会出现一个小问题：在做标题的时候，设计师觉得在小屏幕上用16px显示5个汉字没有问题，但是在大屏幕上用16px显示5个汉字，就太小了，会显得整个屏幕空空荡荡，在这种情况下，就需要用到rem了。（em我就不想再谈了，没有意义，要用就直接用rem，关于这两者的区别，可以自行百度）
谈rem不谈base font毫无意义，谈base font不谈屏幕尺寸也毫无意义。
直接上代码，可能说的更明白：
/*手机端的标准字体大小为16px*/
html {
font-size: 16px;
}
@media only screen and (min-width : 320px) {
}
/*当屏幕宽度大于480像素时，将采用以下字体大小为标准大小，下同*/
@media only screen and (min-width : 480px) {
html {
font-size: 18px;
}
}
@media only screen and (min-width : 768px) {
html {
font-size: 20px;
}
}
@media only screen and (min-width : 992px) {
html {
font-size: 20px;
}
}
@media only screen and (min-width : 1200px) {
html {
font-size: 22px;
}
}
不用担心，这里所设置的字体大小不会影响到你的任何直接定义为px的字体大小，这里的字体大小只有在一种情况下发生作用，那就是使用rem的时候。
回到刚才的例子，手机上一行显示5个汉字的时候，因为手机屏幕小，所以就用16px的字体就够了，所以我们就用1rem，当我们写完font-size:1rem的时候，它在大屏幕上，根据上面的设定，自动就变成22px了。
调的时候的顺序一定要搞清，不要两边来回乱调，而一定是要手机优先，先在小屏幕上用px确保字体显示正常了，再放到大屏幕上看，如果哪块觉得太空，需要放大字体，那么再回到小屏幕上，改写为rem，然后再放到大屏上看。
2016年6月8日补充：
其实em也不是完全毫无用处，在用于首行缩进以及行高时，只能用em，而不能用rem。举个例子：
中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
在这种情况下，你如果把上面两处的2em改成2rem，反而不对了。可以在jsfiddle里做实验调试一下就知道了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115252.html
摘要：前言在自适应布局或者移动端网页开发时，我们经常会用到和两个长度单位。，相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器中都是。最大的优点是提供一致尺寸，便于计算。为了还原设计稿和实现合理的布局所以需要根元素重写。 前言 在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。 区别 ...
摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。 个人翻译，转载请注明出处 英文原文：CSS Font Sizing 写在前面 上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...
摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题 在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...
摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题 在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...
摘要：关于文字个人感觉使用单位结合媒体查询最好做移动端页面。这些话是勉励自己，也送给还未走出象牙塔的学弟学妹，和刚进入社会工作还在迷茫的同胞们。关于弹性布局： display:flex;很好用，将元素放在一排，盒子可用宽度百分比，可替代浮动，虽然浮动也能做到，但是还要清除浮动，多此一举，还可以实现居中等布局效果，但有兼容性问题，特别是justify-content:space-between，...
阅读 3483·2021-08-31 09:39
阅读 1742·2019-08-30 13:14
阅读 2832·2019-08-30 13:02
阅读 2709·2019-08-29 13:22
阅读 2238·2019-08-26 13:54
阅读 702·2019-08-26 13:45
阅读 1539·2019-08-26 11:00
阅读 913·2019-08-26 10:58
