2、px,em,rem之间的关系和换算方式 · Bootstrap前端响应式框架学习技术分享总结

## px,em,rem之间的关系和换算方式 **使用rem与em的原因**：当平板过渡到pc端的时候，字体大小是不是应该要变大一点，不然pc端看到的字体和平板字体一样大小，对使用pc打开网页用户来说就小了很多。又当平板过渡到手机端的时候，字体是不是又要变小一点，不然对使用手机用户来说，平板看到的字体大小正好，到手机就会感觉大了一点。这个时候你设置用媒体查询来设置html根节点的大小来控制rem大小就很方便了。 * px：像素，相对长度单位，相对于屏幕分辨率而言；px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 * em：相对长度单位，相对于当前容器内( 父元素 )的文本的字体尺寸；如果当前容器字体没设置字体大小，则以浏览器的默认字体尺寸来计算，em会继承父辈设置，所以会发现当前的文本字体会复合，是可变的；em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。 * rem：css3新增的单位，也是相对长度单位，它相对于html的根元素，一般是body的字体设置值，这也是与em的本质区别； **px与rem之间的换算** `rem`是相对于根元素`<html>`，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。rem可以做到只修改根元素的比例，就可以通过这个比例调整所有字体大小。我们都知道，浏览器默认的字体大小是`16px`，来看一些`px`单位与`rem`之间的转换关系： ~~~ | px | rem | ------------------------ | 12 | 12/16 = .75 | | 14 | 14/16 = .875 | | 16 | 16/16 = 1 | | 18 | 18/16 = 1.125 | | 20 | 20/16 = 1.25 | | 24 | 24/16 = 1.5 | | 30 | 30/16 = 1.875 | | 36 | 36/16 = 2.25 | | 42 | 42/16 = 2.625 | | 48 | 48/16 = 3 | ------------------------- ~~~ 为了方便计算，通常将在`<html>`元素中设置`font-size`值为`62.5%`，相当于在`<html>`中设置`font-size`为`10px`，此时，上面示例中所示的值将会改变： ~~~ | px | rem | ------------------------- | 12 | 12/10 = 1.2 | | 14 | 14/10 = 1.4 | | 16 | 16/10 = 1.6 | | 18 | 18/10 = 1.8 | | 20 | 20/10 = 2.0 | | 24 | 24/10 = 2.4 | | 30 | 30/10 = 3.0 | | 36 | 36/10 = 3.6 | | 42 | 42/10 = 4.2 | | 48 | 48/10 = 4.8 | ------------------------- ~~~ 如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了。例如，假设一个div宽度为2rem,高度为3rem.则它换算成px为 width:20px.height:30px，同理，假如一个设计稿为宽度20px,高度为30px，则换成成rem，则是 20/10=2rem，30/10=3rem。 ***** **px与em之间的换算** **1.** em和px如何进行换算为了简化font-size的换算，需要在css中的body选择器中先全局声明 font-size=62.5%，很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！这就使em值变为 16px \* 62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。由于em具有会继续父级出血元素的字体大小的特点，这使得1em=10px，所以12px=1.2em。px与em的转换通过10就可以得来，很方便了吧！ **2.** CSS中应用em需要注意两点 * body选择器中声明Font-size=62.5%。 * 将你的原来的px数值除以10，然后换上em作为单位。 * 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 **注意** ： 1. 如果没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若指定值，则1rem就是指定值，也就是所有未经调整的浏览器都符合：1em = 1rem = 16px。 2. html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。 3. 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。 **浏览器的兼容性** 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“rem”来实现其他浏览器的效果。