?? ? ? ???? ??? ?? ? Flexbox ? Grid? ?? ?? CSS ????? ??? ????. ? ??? ?? ??? ?? ? ???? ????? ?? ???? HTML ? CSS ??? ?????? ????? ???? ?? ??? ?? ??? ??? ?? ??? ??????.

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

??? ?? ? ??? : width: 100%

width: 100% ??? ?? ??? ????? ??? ???? : ??? ?? ? ??? ???? ???? ??? ????. ??? ??? ? ??? ????? ?? ??? ?????. ???? ???? ? ? ???? ??????? ??? ???? ????????.

???<picture></picture> ??? ??? ??? ???? ??? ??? ??? ??? ?????. ?? ? ???? ???? ?? ?? ????? ?? ?? ??? ??? ?????.

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png" class="lazy" alt="??? ?? ?? : ?? ???? ??? HTML ? CSS ?? ??">
</source></source></source></picture>

? ??? picture-sm.png ???? ?????. ??? ??? ?? ??? ??? ???? ??? ???? ?????. ?? ?? ???? ?? ??? ?? (1x, 2x, 3x)? srcset ??? ?? ? ? ????.

??? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png" class="lazy" alt="??? ?? ?? : ?? ???? ??? HTML ? CSS ?? ??"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS ??? ??? ??? ??? ?? ?? ??? (DPI)? ???? ? ? ????.

 @Media ?? ?? ? (Min-Resolution : 192dpi) {
  / * ???? ??? ??? */
}

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

?:

 ? {
  ?? ??? : URL (Picture-Md.png); / * ?? ??? */
}

@Media ?? ?? ? (Min-Resolution : 192dpi) {
  ? {
    ?? ??? : URL (picture-lg.png); / * ???? ??? */
    ?? ?? : ??;
    ?? ?? : 100% 150%; / * ?? ?? */
  }
}

object-fit ? object-position ??? ??? ??? ? ??? ?? ??? ??? ?????.

CSS ?? : min() , max() ? clamp()

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

   html {
    ?? ?? : Min (1REM, 22px); / * 16px?? 22px ??? ?? ?? */
  }

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

   .?? {
    ?? : ?? (60%, 600px); / * ?? ?? 60% ?? 600px */
  }

• clamp() : ??, ?? ? ?? ?? ???? min() ? max() ?????.

   .?? {
    ?? ?? : ??? (1REM, 40px, 4REM); / * ?? ?? ?? ?? */
  }

?? ? ?? : ?? ??

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

• vw / vh : ??? ?? / ??.
• rem : ?? ??? ?? ??? ??? ????.
• em : ?? ??? ?? ??? ??? ????.
• % : ?? ??? ??? ??? ????.

rem ?? ??? ??? ???? ??? ????? ?????. em ??? ?? ?? ??? ???? ??? ? ??? ?????. vw ? vh ??? ??? ?? ???? ????.

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

??? HTML ? CSS ??? ??? ??? ??????? ???? ???? ?? ??? ??? ?????. ??? ??? ??? ??? ??? ?? ??? ??? ? ???? ?? ? ? ????. ??? ??? ???? ?????? ???? ???? ?? ???? ?? ? ????.

? ??? ??? ?? ?? : ?? ???? ??? HTML ? CSS ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!