HTML ?? ? ??? ??? : ?? ? ??? ????
? ???? ?? ?? ? ???? HTML ?? (? ??? CSS)? ?????. ?? ? ??? ??? ??? ??? ???? ?? ??? ???? ????? ???????. ?? ???? ???? ? ?? ??? ?? ? ??? ????.
??? ???? ...
?? ??
?? ??? ????? ...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381805452081.jpg" class="lazy" alt="HTML ?? ? ??? ???">
??? ??? ??? ( src )? ??? "????"(1 ×) ???? ????. ????? ?? ??/?? ???? ???? ?? ????? ??? ?????. ??? ?? 2x ??? ?????. ????? ? ?? ?? ?? ????? (2X)? ??? ?? ?? ??? ?? ???? ?????.
<img src="/static/imghw/default1.png" data-src="baby-lowres.jpg" class="lazy" alt="?? ???? ???? ??." srcset="
baby-high-1.jpg 1.5x,
baby-high-2.jpg 2x,
baby-high-3.jpg 3x,
baby-high-4.jpg 4x,
baby-high-5.jpg 100x
">
????? ?? ?? ??? ?? ? ? ????.
??? ???? ????? X-Descriptor? ?? ? ??? ??? ?? ???? ?????. ?? ????? ??? ??? ? ??? ? ???? : ?? ?? ??. ??? ?? ? ?? ? ???? ?? ? ????? ??? ???? ???? ?? ???? ???? ??? ???? ?????. ? ?? ????? ??? ?? ??? ??? ???? ???? ? ?? ??? ???? ??? ??????. w ?? ? ? sizes ??? ???? ????. ?? ???? ?????.
srcset/w ?? ??
??? ?? ????. ?? ?????? ?? ? ??? ??? ? 85%? ?????. ??? ??? ??? ???? ?? ??? ???? ????? ?? ??? ??? ????????. ??? ?? ?? (x)? ???? ???? ???? ?? W ?????? ???? ?? ??? ???? ?????. ??? baby-s.jpg ? 300 × 450 ? ?? 300W? ?????.
?? ?? ?? (W) ???????? srcset ???? ????? ???? ?? ? ??? ? ? ??? sizes ??? ?? ???????. ? ??? ??? ????? ??? ?? ? ??? ? ? ????.
??? ?? ??? ????
sizes ??? ??? ?? ???? ? ????. sizes ??? ?? ? ???? ????? ?? ? ???? ??? ????? CSS? ??? ??? ??? ?????. ??? ???? ??? ????? ??? ????? ?? ????!
? ?? ?? ??? ??? ??? ????? ?? ?????. ?? ???? ??? ????. (??? ??? ??? ????????. ?? ???? ???????)
?? ?? ??? ??? ???? CSS? ?????.
? {
?? : 2REM;
?? : 500 125% System-UI, Sans-Serif;
}
.page-wrap {
????? : ???;
? : 1rem;
???-???-?? : 1fr 200px;
???-??? ?? :
"?? ??"
"?? ???"
"?? ??";
}
@Media (max-width : 700px) {
.page-wrap {
???-???-?? : 100%;
???-??? ?? :
"??"
"??"
"??"
"???";
}
}
@Media (max-width : 500px) {
? {
?? : 0;
}
}
??? ??? ? ?? ??? ????. ??? ?? ?? ??? ??? ???? ??? ??? ??? ?? ??? ????? (??? ??? 700 ???? ? ??).
- ?? ?? : 9REM? ?? ? ??? ???? ??? ???
calc(100vw - 9rem - 200px)???. ??? 200px ?? FR ??? ???? ???? ??? ??? ?????. - ?? ?? : ??? ?? ??? ????? ??? ????. ???? ????, ??? ???
calc(100vw - 6rem)???? ??? ??? ??? ? ????. - ?? ?? : ?? ??? ?????
calc(100vw - 2rem)? ?????.
???! ??? ???, ?? ????? ?? ???? ?? ????? ??? ??? ? ?? ???????. ?????, ?? ??? ??? :
<img ...="" sizes="
(max-width: 500px) calc(100vw - 2rem),
(max-width: 700px) calc(100vw - 6rem),
calc(100vw - 9rem - 200px)
">
????? 3 ?? ?? ??? ??? ??? ???? ???? ???? ???? ??? ??? ??? ?? ?? ?, ?? ? ??? ???? sizes ??.
?! ??! ? ??? ??? ?????. ? ??? CSS ?????? ?? ?? ???? ??? ???? 100%?? ??? ??? ? ??? ???? ????. ??? Martin Ausw?ger? respimagelint? ?? ?? ???????. ?? ? ???? ??? ???? sizes ??? ?? ??? ??? ????? ??? ?????? ?? ????? ??? ?????????.
<img ...="" sizes="
(min-width: 2420px) 2000px,
(min-width: 720px) calc(94.76vw - 274px),
(min-width: 520px) calc(100vw - 96px),
calc(100vw - 32px)
">
??? ??? ????? ??????. ???? ???? ?? ??? ?????? ?????. Martin? ??? ????? ???? ???? ?? ? ??? ???? ??? ??? ??? ?? ? ???? ?? ??? ???? sizes ??? ?????. ???? ?? ? ????? ?????. ??? ?? ??? sizes ??? ???? ??? ??? ?? ?? ??? ??? ???? ??? ??? ???? ?? ????.
? ?? ?? ? ??? ?? ??? Eric Portis? w ????? ? sizes : ??? ??????.
? ??? ??
? ?? ??? Horseshoe and Grenade Method ?? sizes ???? ???? (?, ?, ???? ???). ??? ?? ?????.
?? ??, sizes="96vw" ??? ?????. "? ???? ???? ?? ????. ?? sizes="(min-width: 1000px) 33vw, 96vw" ??? ?????. "? ???? ?? ???? 3 ? ????? ?????. ??? ??? ?? ??? ?????." ??? ???? ??? ???? ??? ? ? ????.
?? ?? ?? ??? ???? ????? ?? ???? ??? ? ? ???? (? : sizes="(max-width: 1000px) 100vw, 1000px" . "??, ???? ????? ?? ?? ?? ????, ??? ??? ??? ? ????. ??? ????? ???? ?? ???? ????. 1000 ??? ?? ??? ????.
?? ??
sizes ???? ?? ??? ??? ? ??? ????? ???? ?? ??? ??? ?? ?? ? ???? ?????. ? ???? ?? ???? ???? ?? ????? ? ??? ??? ?? ? ??? ??? ???? ????? ?? ????.
??? ? ?? ??? ??? sizes ?? ?? ? ?? ? ????? ?? ?? ??? ?? ????? ????.<img alt="HTML ?? ? ??? ???" > ?? ?? ??? ??????. ?? HTML ?? ??? ???? ??? ?? ??? ??? ?????. ?? ??, PHP ??, ?? ?? ??, ??? ?? ??? ?? ???? API ?? ??? ?? ??? ??? ??? ???? ?? sizes ? ??? ? ????.
php // ??? ???? $ my_sizes = ""; ?> <img alt="" sizes="<?php echo $my_sizes; ?>" src="" srcset="">
"???? ??"
?? sizes ??? ?? ???? ????? ???? ?? (?? ??? ???)? ?? ??? ? ? ????. ?, ??? ?? ??? ??? ? ???? ??? ??? ?? ?? ??? ?? ? ?? ?? ??? ???? ??? ? ????.
???? ??? ?? ??????. 2x ?? ?? ??? ?? 1200 ??? ????? 40VW? ??? ???????? ?? ? ???. ??? ?? ??? 960 ???????? ????? ?? ??? ??? ????. ????? ?? ??? ? ?? ?? ??? ???? ???? ?? ??? ???? sizes ???? ???? ??? ???? srcset ? ?? ??? ?????. ??? ????? ???? ??? ?? ?? ? ? ????.
????? ?????? ????? ???? ? ?? ??? ??? ? ????. ?? ??, ???? ?? ???? ??? ??? ? ????. ?? ???? ??? "??? ??"???? ?????? ??? ??? ? ????. ????? ???? ??? ????? ???? ??? ??? ?? ???? ?? ? ? ????. ???? ??? ???? ???? ?????. ?? ????? ??? ???? ????? ?????. ?? ??? 300 ?? ???? ??????? ????? ?? ?? ??? 600 ?? ???? ??? ?? ???? ?? ?????. ???. ??? ????? ??? ??? ?? srcset / sizes ??? ?? ???. ?? srcset ?? ?? ??? ???? ?? ??? ???? ?????. ?? ???? ???? ? ? ????. ??? ???? ?? ???.
??? ?? ?????. ????? ?? ??? ??? ?? ?? ?????
??? "??, ? ???? ??? ??, ?? ???? ????? ????? ??? ??????" ??, ??? ?? ???, HTML? CSS? ???? ? ??? ?? ?? ?????. sizes ??? ??? ??? ????. ????? ???<img alt="HTML ?? ? ??? ???" > ?? ? ? ??? ?? ? ???????.
<img data-sizes="auto" data-srcset="
responsive-image1.jpg 300w,
responsive-image2.jpg 600w,
responsive-image3.jpg 900w">
?? ??? "??? ??? ???? ??? ??????" (?,??? ??? ??? ??? ? ????? ????? ????? ?? ??? ??? ??? ?? ????). ??, ?? ??! Alexander Farkas? Lazysizes Library? ??? ??? sizes ??? ???? ???? ??? ?? ??? ?? ????? ???? sizes ??? ?? ???? ????.
??? ????? ? ? ????
sizes ? ?? ?? ??. ???? ???? ???? "??"? ? ??? ? ???? ??? ????. ?? ???? ???? ????? ? ?? ?? ??? ? ? ??? ? ?? ? ? ????. ???? src ???? ???? ???? ?????? ?? ????. ??? ?? ? ?? ??? ??? ?? srcset ? ??? ???? sizes ??? 200VW ?? 300VW? ?? ? ??? ???? ????? ???? ?? ??? ??? ???? ?????????. Scott Jehl ?? ??? ?? ??? ??? ????. (?? ??? ??? ????????. ?? ???? ???????)
(??? ??? ??? ?? ?? ?????? ????? ??? ?? ????? ???? ?? ????)
? ??? HTML ?? ? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!
? AI ??
Undress AI Tool
??? ???? ??
Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?
AI Clothes Remover
???? ?? ???? ??? AI ?????.
Clothoff.io
AI ? ???
Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!
?? ??
??? ??
???++7.3.1
???? ?? ?? ?? ???
SublimeText3 ??? ??
??? ??, ???? ?? ????.
???? 13.0.1 ???
??? PHP ?? ?? ??
???? CS6
??? ? ?? ??
SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)
?? ??? ? ????? ????? CSS ????
Jul 07, 2025 am 12:07 AM
CSS?? ????? ??? ? ?? ??? ????. 1. HTML ? CSS? ?? ??? ?????? ???? ?? ???? ?? ???? ??????. 2. ?? ??? ??? ?? ???? ???? ?? ?? ??? ?? ?? ??? ??????. 3. ??? ????? ???? JavaScript? ?? ???? ?????? ??? ?????. ? ?? ??? ??? ??? ????? ?? ??, ??, ??? ? ?? ???? ?? ?? ?? ??? ???? ?????.
CSS ???? ??? ?? ? ??? ??
Jul 07, 2025 am 01:44 AM
CSS ???? ??? ? ??? ??? ????? ???? ??? ???? ???? ?? ?? ???? ????? ???????. 1. Flexbox ? ??? ??? ?? ???? ??? ??, ?? : ??? ?? ? ????? ??? ????. 2. Caniuse ?? ?? ?? ??? ??????. 3. -webkit-, -moz-, -ms-, -o- ? ?? ???? ???? ???? ?????. 4. AutoPrefixer? ???? ???? ???? ???? ?? ????. 5. ?? ????? ????? PostCSS? ???? BrowsersList? ??????. 6. ?? ? ???? ???? ?????. 7. Modernizr ?? ??? ??? ????? ??? ? ????. 8. ?? ????? ???? ?? ? ??? ????.
?????? ???? ????? : ???, ????? : ?? ? ????? : ??? ???
Jul 11, 2025 am 03:25 AM
themaindifferencesbetweendisplay : ???, ??, andinline-blockinhtml/cssarelayoutbehavior, spaceusage ? stylingcontrol.1.inlineElementsFlowWithText, do n'tStartonnewlines, ingorewidth/height, andonlyapplyhorizontalpadding/margins —IdealforIneTeTexting
????? CSS? ??? ??? ??????
Jul 11, 2025 am 03:26 AM
??? ?? ???? ???? ??? ??, ?? ??? ??? ? ? ????? ??? ??? ???? ???? ? ? ?? ? ? ????. 1. CSS ?? : ?? ??? ???? ???? ?? ??; 2. ????? ?? ?? ?? ???? ?? ?? ??? ??? ? ????. 3. ?? ??? ??? ??? ??? ?? ?? ???? ????????. 4. ??? ????? ??? ???? ?? ? ??? ??? ?? ??? ?? ?? ??? ????? ???? ?? ????.
CSS ?? ??? ??? ?? ??? ????
Jul 09, 2025 am 01:29 AM
CSS? ?? ?? ??? ??? ??? ???? ???? SVG? ???? ?? ???, ?? ????, ??? ?? ?? ??? ?? ???? ??????. ??? ??? ????. 1. ?, ??, ??? ?? ?? ??? ?? ??? ?????. 2. ?? ?? ? ??? ???? ??? ? ????. 3. ?????? ?? ?? ?? ?? ????? ???? ?? ??? ?? ? ? ????. 4. ???? ???? ??? ??? ??? ????? ?? ? ??? ????. ???? ???? ?? ?? ?? : ? (50pxatcenter) ? ??? ?? ?? : ??? (50%0%, 100 0%, 0%)? ?? ????. ????
CSS? ???? ?? ? ???? ??? ???
Jul 15, 2025 am 01:10 AM
CSS? ???? ?? ? ???? ???? ??? ?? ??? ?? ?? ?? ? ? ????. 1. Max width : 100% ? ?? : Auto? ???? ???? ??? ????? ???? ??? ??? ? ??????. 2. HTML? SRCSET ? ?? ??? ???? ?? ??? ??? ??? ??? ???????????. 3. ?? ?? ? ?? ??? ???? ??? ??? ? ?? ?????? ??????. ? ??? ?? ???? ?? ???? ???? ???? ????????.
Demystifying CSS ?? : PX, EM, REM, VW, VH ??
Jul 08, 2025 am 02:16 AM
CSS ??? ??? ?? ?? ?? ? ?? ? ?? ??? ?? ????. 1.px? ?? ??? ????? ?? ??? ??? ?? ??? ?????. 2.EM? ?? ????, ?? ?? ??? ??? ?? ?? ???? ??, REM? ?? ??? ???? ? ????? ??? ????? ?????. 3.VW/VH? ?? ? ???? ??? ??? ??? ??????? ?? ???? ?????? ???????. 4. ??? ?? ?? ? ??, ?? ?? ?? ? ??? ???? ???? ???????. ???? ??? ???? ??? ? ?? ??? ???? ? ????.
???? CSS ???? ???? ??????
Jul 26, 2025 am 07:04 AM
?? ????? CSS ?? ??? ????? ?? ?? ??? ??, ?? ?? ?? ??, Flexbox ? ??? ???? ?? ?? ? ?? CSS ??? ????? ??? ???? ???? ?? ????? ??? ?????. 1. ?? ??? ??? ???? ????. ???? CSSRESET ?? NALLER.CSS? ???? ?? ???? ???? ????. 2. IE? ?? ??? ?? ?? ?? ??? ????. ?? ?? : ?? ? ???? ??? ??? ???? ?? ????. 3. Flexbox ? Grid? Edge Case ?? Old ???? ??? ?????. ? ?? ??? ? AutopRefixer ??; 4. ?? CSS ?? ??? ???? ????. Caniuse? ???? ?? ?????????.
