rem单位的使用总结

    xiaoxiao2021-03-25  35

    在这周做一个基于移动端的页面中用到了单位rem,因此在这里总结自己在使用中的一些新的体会,有不准确之处还望指正。

    谈到单位rem不得不先来谈一谈px和em这两个经典的单位。

    px

    像素,可以说是最经典的文本计量单位了,相信大家在刚刚接触前端技术时大部分时候使用的都是它,它就相当于对文本或元素设定了比较固定和精确的大小值,使用它更方便于我们精确的设定每一个元素的大小,无需经过额外的换算,到手即用,很符合“所见即所得”这一概念。

    *需要注意的是,如果某一个元素没有设定px那么它会默认从父元素处继承px的大小*

    随着移动设备的发展和进步,web技术开始大幅度向移动端迁移,在考虑到移动端与pc端有种种不同的情况以及当谢越来越注重用户个性化体验的前提下,px在移动端上的应用明显不能满足人们的需要,于是乎也就出现了根据父级决定大小的单位——em。

    em

    em,继承父级的需要神级脑力计算才能准确使用的大小单位(笑),当然这是一个夸张的说法,我们知道,在前端拿到设计稿时,如果设计稿的内容要求比较完备,那么就会出现精确的元素大小要求,比如某个元素必须是XXpx,然而如果这个大小是要求适配移动端,那么显然这个大小还要隐性的要求按照页面大小改变而变化,那就要使用不可避免的需要使用到em了

    说到这里问题就来了,如果某个浏览器的默认html的排序为12,那么在他的第一子元素body很容易就知道字体大小是12px了,到这里,如果我们按照设计师要求,对于某个元素设定字体大小为18px,为了适配移动端使元素内的文字大小根据页面大小而变化,我们对元素设定的大小就是1.5em,嗯,到这里我们不就立刻觉得“这不是很简单嘛,难点和亮点在哪”,我只想说,“少年你还太天真了”(手动滑稽)+自动滑稽 假设我们不仅仅有一个div嵌套呢,在实际开发过程中,设计一个大型网站,可以想象以下其代码量是很庞大的,如果我们总是需要计算子元素相与父元素的文本大小关系,耗费脑力不说,还很容易出错,比如刚才的例子,在子元素为18px,后,我们要在它内部再嵌套多个子元素,第一个为22px,第二个为14px,同时把字体设置为80%,第三个更里层为16px……

    Excuse Me? nizaidouwowanme?(歪果仁学中文音),我的Math是体育老师教的,你别吓我啊

    rem

    全名root em,基于em的基础上改进的单位,只参照html的px值,不会受到父级元素的影响,假设最初html设置font-size:12px,那么其后所有子元素设置的文字大小都将是12*X,比如1.5rem就是12*1.5=18px,但他也有一个历史性的缺点,

    由于它是CSS3的新增设置,所以并不兼容低版本浏览器如IE8-等 在这里还需要强调一个关键点,那就是浏览器默认的html的文本大小都不一样,有的是16px,有的是12px,或许还有其他更多的默认大小,所以如果需要使用rem这个通俗易懂暴力的单位那么最好在一开始的时候就对html的font-size进行声明,比如font-size:12px,这样一来可以统一html的默认字体大小,减少出错的概率。

    如果说的还不够详细,那么请找找百度爸爸和谷歌妈妈

    转载请注明原文地址: https://ju.6miu.com/read-26086.html

    最新回复(0)