rem的基础使用
rem的支持性
目前除了IE8以及之前的浏览器版本不支持外,其他浏览器都支持
为什么要使用rem
rem是相对html根元素的相对单位,当我们使用移动端适配的时候,我们可以在html根元素上改变字体的大小,从而改变整个页面元素的大小。
px和rem怎么选择
对于页面适配要求不高的,我们可以简单的使用px单位去展示页面,但是对于页面适配要求较高的页面,我们可以简单的使用rem。
怎么使用rem
下面是代码块,在style中设置html元素的font-size为62.5%,目前页面中默认html元素的font-size为16px,我们设置font-size = 62.5%,意思就是:62.5% * 16px = 10px = 1rem; 依次类推: 2rem = 20px,因为这样的换算比较方便,所以,一般建议设置font-size= 62.5%;
<html><head>
<style>
html {
font-size: 62.5%;
}
.first {
font-size: 2rem;
}
.second {
font-size: 1.5rem;
}
</style>
</head>
<body>
<p class="first">first</p>
<p class="second">second</p>
</body></html>