CSS ???? ??? ???? ?? ??? ???? ?? ???? ??? ???? ??? ?? ? ? ???? ?? ?? ???? ?? ??? ??? ?? ??? ??? ? ????. ① ?? ??? ?? ????? ???? ???? ??? ???? ??? ?????? : ??? ?? ?? ?? ???? : Card / Inline-Size; ② @Container ?? (Min-Width : 400px) ??? ???? ???? ?? ??? ??? ?? ? ? ???? ???? ?? ?????? ?? ?????? ?? ? ? ????. ③? ????? ??? ????, ?? ?? ????? ? CMS ???? ??? ?? ????? ??? ?? ??? ?? ??? ?? ? ? ????. ④ 2024 ? ??, Chrome 105, Safari 16.4 ? Edge 105? ?????? Firefox 110? ?? ??? ?????????. ??? ??? ???? ???? ?? ????. ????? @Container? ???? ???? ???? ?? ? ???? ? ?? ? UI ?? ??? ??????.

CSS ???? ??? ?? ??? ?? ???? ?? ????? ?? ? ?? ?? ??? ?? ? ??? ???????. ?? ??? ?? ( @media )? ??? ? ???? ??? ??? ??? ?? ? ?? ??? ???? ? ? ?????.

??? ???? ??? ???? ????? ???? ?? ?? ??? ??? ??? ???? ??? CSS ???? ?? ?? ???.

? ?? ?? ? : ?? ???? ??

HTML

 <div class = "card-container">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg"alt = "?? ??" />
    <div class = "content">
      <H3> ?? </h3>
      <p> ??? ?? ?????. </p>
    </div>
  </div>
</div>

<div class = "Card-container wide">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg"alt = "?? ??" />
    <div class = "content">
      <H3> ?? ?? </h3>
      <p>? ???? ?? ????? ?? ?????? ?????. </p>
    </div>
  </div>
</div>

CSS

 / * 1 ?? : ???? ?? (???? ?? ??? ?) */
.card-container {
  ???? ?? : ??? ??; /* ?? ?? ???? ?? ???*/
}

/ * ?? ?? ?? (??) */
.card-container {
  ???? : ?? / ??? ??; /* '??'?? ????, ??? ?????? ?? ??*/
}

/* ?? ?? ?? : ?? ???*/
.card {
  ????? : Flex;
  ??? ?? : ?;
  ?? : 1px Solid #CCC;
  Border-Radius : 8px;
  ???? : ???;
  Font-Family : Sans-Serif;
}

.card img {
  ?? : 100%;
  ?? : ??;
}

.card .Content {
  ?? : 16px;
}

/* ???? ??> = 400px ? ?? ?? ?????? ??*/
@Container Card (min-width : 400px) {
  .card {
    ??? ?? : ?;
    ?? ?? : ??;
  }

  .card img {
    ?? : 50%;
    ?? : ??;
  }

  .card .Content {
    ?? : 20px;
  }
}

? ?? ??? ??????

• container-type: inline-size;
  ??? ??? ?? ?? (?? ??)?? ??? ?? ????????? ?????.

  

• container: card / inline-size;
  ?? ???? ????? card ? ???? ??? ?? ??? ?? ???? ?? ??? ???????.

• @container card (min-width: 400px)
  ??? ???? card ??? ??? ???? ??? 400px ??? ???? ?????.

  

• ? ?? ?? ??? ???? ??? ?? ?? ?? ????? ??? ?? ?? ??? ? ????? (? : ??? ? ?? ?? ??? ??? ?? ??).

? ?? ?? ????

• ??? ????? ??? ? ?? ?? ????? ???? ???? ?????.
• ?? ?? ??????? ??? ? ??? ?? ?? ? ????? ?? ?? ?? ???
• CMS ?? ???? ????? ??? ?? ??? ?? ???? ?? ??? ????.

?? ???? ??? (20124 ? ?? ??)

??? ??? ?????? ???????.

• ?? 105 ?
• Firefox 110 (enabled layout.css.container-queries.enabled ) ??
• ??? 16.4 16
• ???? 105 ?

???? ??? ??? ? ?????

????? ?? ??. container ? @container ? ???? "?? ??"?? ??? "?? ? ????"? UI ?? ??? ??? ? ????.

? ??? CSS ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!