CSS3中的Rem值与Px之间的换算

简介: bootstrap默认 html{font-size: 10px;}   rem是一个相对大小的值,它相对于根元素, 比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。

bootstrap默认 html{font-size: 10px;}

 

rem是一个相对大小的值,它相对于根元素<html>,

比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。

然后其他的字体就是将你要的值除以14得到的值

比如默认的twentytwelve主题大小是960px;换算成rem就是960/14=68.57142857142857rem;

padding的24px也就是24/14=1.714285714285714rem,以此类推。

 

上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如右图:

用这个rem单位的好处有啥我不知道,不过如果你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了,这比em简单多了,到现在我都没搞清楚em和px之间是如何换算的。

另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,可以像twentytwelve默认文件那样设置个px再设置个rem就可以了。

 

 

参考:http://lms.im/html-css/1069.html

相关文章
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
151 1
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
659 8
|
前端开发
css中px和em的区别
css中px和em的区别
141 0
|
前端开发
css中px和em的区别
css中px和em的区别
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
94 0
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
239 3
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
183 0
|
前端开发 JavaScript
CSS 【详解】响应式布局(含 rem 详解)
CSS 【详解】响应式布局(含 rem 详解)
202 0
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
116 0
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,

热门文章

最新文章