移动端使用rem的方法有很多,但是最常用的方法是使用CSS3中的新属性,即rem
rem是一种相对单位,它的值是相对于根元素(html元素)的字体大小而计算的
因此,当我们使用rem作为单位时,只需要设置html元素的字体大小,就可以让所有元素的字体大小都相对于html元素的字体大小而变化
下面我们来看一下如何使用rem在移动端设计:1. 首先,设置html元素的字体大小,一般设置为20px,即html { font-size: 20px; }
2. 然后,在其他元素中使用rem作为单位,例如,设置div元素的宽度为500px,则可以使用div { width: 25rem; }来设置
3. 同样,可以使用rem来设置元素的字体大小,例如,设置div元素的字体大小为14px,则可以使用div { font-size: 0.7rem; }来设置
4. 另外,也可以使用rem来设置元素的行高,例如,设置div元素的行高为20px,则可以使用div { line-height: 1rem; }来设置
使用rem作为单位可以让我们更加方便地在移动端设计,而且可以使得页面在不同分辨率的设备上都能够得到良好的显示效果
发布者:超威蓝猫,转转请注明出处:https://seowki.com/seo/30037.html