[分享]CSS中content如何自适应

CSS中的content属性是针对伪元素（:before, :after）所设置的。伪元素可以用于在一个HTML元素中插入内容，同时不影响实际的HTML标记。如何让content属性适应不同的屏幕尺寸...

CSS中的content属性是针对伪元素（:before, :after）所设置的。伪元素可以用于在一个HTML元素中插入内容，同时不影响实际的HTML标记。如何让content属性适应不同的屏幕尺寸呢？下面将介绍几种方法：

一、使用百分比（%）

.my-element:before {
  content: " ";
  width: 40%;
} 

此时伪元素的宽度是其相对父元素的百分比，因此能够自适应不同的屏幕尺寸。

二、使用viewport单位（vw、vh）

.my-element:before {
  content: " ";
  width: 40vw;
} 

viewport单位是相对于视口的宽度和高度进行计算的，因此同样能够自适应不同的屏幕尺寸。

三、使用媒体查询（@media）

.my-element:before {
  content: " ";
  width: 40%;
}
@media (max-width: 767px) {
  .my-element:before {
    width: 60%;
  }
}
@media (max-width: 479px) {
  .my-element:before {
    width: 80%;
  }
} 

结合媒体查询，在不同的屏幕尺寸下设置不同的宽度，实现自适应。

以上三种方法均可以实现CSS中的content属性的自适应，开发者可以根据实际情况选择合适的方法。