[分享]css像素rem百分比区别

CSS中有三种常用的单位，分别是像素（px）、相对单位（rem）和百分比（）。其中像素和百分比比较容易理解，rem作为比较特殊的相对单位也需要我们好好学习。下面我们来分别介绍这三种单位的区别。 / ...

CSS中有三种常用的单位，分别是像素（px）、相对单位（rem）和百分比（%）。其中像素和百分比比较容易理解，rem作为比较特殊的相对单位也需要我们好好学习。下面我们来分别介绍这三种单位的区别。

 /* 像素 */
  div{
      font-size: 16px;
      width: 200px;
  }

  /* 百分比 */
  div{
      font-size: 16px;
      width: 50%;
  }

  /* rem */
  html{
      font-size: 16px;
      /* 因为rem是相对单位，所以基准字体大小应该跟页面根节点的字体大小一致 */
  }

  div{
      font-size: 1rem;
      width: 12.5rem;
      /* 这里的1rem相当于16px，因为我们之前设置了基准字体大小为16px
      所以12.5rem这里相当于200px，跟我们第一个例子的200px是一样的*/
  } 

像素单位非常常用，它的值是固定的一个像素值，比如上面我们设置一个div的width为200px，那它的宽度就是200个像素。但是在不同的屏幕大小和设备上，显示出来的大小可能会有差别。

百分比单位是相对于父元素宽度的百分比值。比如上面我们设置div的width为50%，那它的宽度就是父元素宽度的一半。因此在不同的设备或屏幕大小上，百分比单位的大小与像素大小有着较大的关联。

rem单位是相对于root元素或html元素的字体大小。默认的html字体大小是16px，我们设置一个元素的字体大小为1rem时，它的实际大小就是root元素的字体大小。rem单位的优势在于不受屏幕大小或设备的影响，比如我们在上面的示例中将html元素的字体大小设置为16px，那么在不同设备和不同屏幕大小下，这个字体大小是不会改变的。

总的来说，像素、rem和百分比可能会在不同的场景、需求下有不同的应用和优势。在实际开发中，我们需要综合考虑屏幕适应性、字体大小、布局等多个因素，选择合适的单位来实现最佳效果。