一、rem、em、px三者的区别及使用场景
在CSS中，我们通常使用像素（px）作为单位用来规定页面元素的大小。相比于使用%或者em等单位，像素的最大优点就是精确。但是，如果电脑分辨率不同，显示出来的像素就不一样，从而影响了网页的可读性。而rem单位，就是相对于根元素（html）的字体大小来进行计算的。当你改变根元素的字体大小，其他元素的大小也会跟着变化，从而保证网页的可读性增强。
em单位是相对于其父元素的字体大小进行计算的。这个特性可以用来实现自适应布局。但是，当元素的父元素字体大小改变时，子元素也会跟着改变，从而影响网页的布局。因此，相较于em，使用rem更为稳定可靠。
总结起来，像素单位优秀的精度和稳健的适配性，rem能够保证页面在不同分辨率呈现相同的大小，em则适用于某些局部字体、内边距等的自适应变化使用当中。
/* 对比rem,px */
/* 1rem = 16px */
html {
font-size: 16px;
/* 改变字体大小，其他元素随之变化 */
}
div {
width: 1rem;
height: 1rem;
/* 根据网页的字体大小计算元素的大小 */
}
h2 {
font-size: 2em;
/* 根据父元素的字体大小计算子元素的大小 */
}
二、使用relative单位控制元素间的位置
使用relative单位可以轻松控制元素在网页上的位置，不必依靠复杂的定位或者浮动等属性实现。相较于绝对位置的控制，相对位置的控制更为简便易用。
对于比较相近的两个元素，我们可以使用相对位置控制它们在同一位置上的左右排版。下面的代码可以展示出在同一行中左右排版的两个元素：
/* 定义左右两个元素 */
.left {
position: relative;
left: -100px;
}
.right {
position: relative;
left: 100px;
}
三、使用relative单位控制元素尺寸的伸缩
在网页设计中，我们常常会遇到需要放大或者缩小网页元素的需求。使用增大或者减小固定的像素值显然不是一个好的选择，这样只会导致网页布局凌乱。而使用relative单位可以在维护网页的整体感觉的同时灵活调整元素的大小。
下面的例子演示了使用relative单位实现放大网页图片的功能：
img:hover {
transform: scale(1.1);
/* 将元素缩放至原先尺寸的1.1倍 */
}
四、用relative单位定义网页过渡和动画效果
通过使用relative单位，我们可以方便地给网页元素增加过渡或者动画效果。通过增加transition属性或者animation属性，我们可以轻松实现复杂的网页动画效果，从而使得网页看起来更加美观、动感。
下面的代码定义了一个2秒钟消失的动画效果：
.links {
position: relative;
opacity: 1;
/* 先定义元素的初始属性 */
transition: opacity 2s ease-in-out;
/* 元素的opacity属性在2秒后消失 */
}
.links:hover {
opacity: 0;
/* 鼠标悬停时，元素进行消失*/
}
五、总结
CSS相对单位的出现，方便了网页的布局和样式调整。其中，rem单位可以使用相对于根元素的字体大小来进行计算，并且它的某些特性可以帮助实现自适应布局；em单位适用于局部的自适应调整，而主要应用在字体、内边距等元素的大小调整中。而使用relative单位则可以开始简洁易读的控制元素的位置和尺寸。通过掌握相对单位的使用，我们可以为网页设计注入更大的活力，从而提升用户的使用体验。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286756.html
微信扫一扫 
支付宝扫一扫 