{"id":5045,"date":"2015-11-06T00:40:05","date_gmt":"2015-11-05T16:40:05","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=5045"},"modified":"2015-11-06T00:41:24","modified_gmt":"2015-11-05T16:41:24","slug":"anatomy-of-responsive-images","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2015\/11\/anatomy-of-responsive-images\/","title":{"rendered":"HTML5\u54cd\u5e94\u5f0f\u56fe\u7247\u6280\u672f\u4e2d\u6587\u56fe\u89e3"},"content":{"rendered":"<p>by <a href=\"http:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a><br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=5045\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=5045<\/a><\/p>\n<h3>\u4e00\u3001\u672c\u6587\u5185\u5bb9\u5e72\u8d27\u91cf\u8fdc\u4e0d\u53ca\u4e4b\u524d\u7684\u90a3\u7bc7<\/h3>\n<p>\u9996\u5148\uff0c\u9700\u8981\u58f0\u660e\uff0c\u6216\u8005\u53eb\u544a\u77e5\u5427\uff0c\u5c31\u662f\uff0c\u672c\u6587\u5c5e\u4e8e\u8865\u5145\uff0c\u771f\u6b63\u5173\u4e8e\u54cd\u5e94\u5f0f\u56fe\u7247\u6280\u672f\u7684\u5e72\u8d27\u5185\u5bb9\u53c2\u89c1\u6211\u4e4b\u524d\u7684\u201c<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/2014\/10\/responsive-images-srcset-size-w-descriptor\/\">\u54cd\u5e94\u5f0f\u56fe\u7247srcset\u5168\u65b0\u91ca\u4e49sizes\u5c5e\u6027w\u63cf\u8ff0\u7b26<\/a>\u201d\u4e00\u6587\u3002<\/p>\n<p>\u63d0\u524d\u8bf4\u660e\u4e0b\uff0c\u672c\u6587\u7684\u793a\u610f\u56fe\u7247\u5747\u6765\u81ea\uff1a<a href=\"https:\/\/jakearchibald.com\/2015\/anatomy-of-responsive-images\/\">The anatomy of responsive images<\/a><\/p>\n<p>\u6211\u53ea\u662f\u628a\u4e0a\u9762\u7684\u82f1\u6587\u53d8\u6210\u4e86\u4e2d\u6587\uff0c\u4e00\u4e9b\u56fe\u7247\u65f6\u5019\u5b9e\u65f6\u6548\u679c\u53ef\u4ee5\u53bb\u539f\u9875\u9762\u89c2\u6469\u3002<\/p>\n<p>\u53e6\u5916\uff0c\u8865\u5145\u4e86\u4e00\u4e9b\u9057\u6f0f\u7684\u5173\u4e8e\u54cd\u5e94\u5f0f\u56fe\u7247\u5904\u7406\u7684tips.<\/p>\n<p><strong>1. \u4f5c\u4e3a\u80cc\u666f\u56fe\u7247\uff0cimage-set()\u8fd9\u53ae<\/strong><br \/>\n\u8fd9\u4e2a\u662f\u6211\u81ea\u5df1\u8865\u5145\u7684\uff0c\u7cbe\u529b\u6709\u9650\uff0c\u6211\u5c31\u4e0d\u4f5c\u56fe\u4e86\uff0c\u563b\u563b\uff0c\u4f7f\u7528\u793a\u610f\u5982\u4e0b(\u76ee\u524d\u9700\u8981<code>-webkit-<\/code>\u79c1\u6709\u524d\u7f00)\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>.example {\n    background-image: <span style=\"opacity:.6;\">-webkit-<\/span>image-set( \"test.png\" 1x, \"test-2x.png\" 2x, \"test-print.png\" 600dpi );\n}<\/pre>\n<\/div>\n<p>\u517c\u5bb9\u6027\u5982\u4e0b\uff1a<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"380\" src=\"http:\/\/caniuse.com\/css-image-set\/embed\" frameborder=\"0\"><\/iframe><\/p>\n<p><strong>2. \u5c3a\u5bf8\u56fa\u5b9a\uff0c\u5bc6\u5ea6\u53d8\u5316<\/strong>\n<link href='https:\/\/fonts.googleapis.com\/css?family=Just+Another+Hand|Inconsolata:700' rel='stylesheet' type='text\/css'>\n<style>.svg-exp{position:relative;max-width:600px;}.svg-exp p{padding:0;margin:0;}.svg-exp svg{position:absolute;width:100%;height:100%;top:0; left:0;}.img-d-1 .st0{fill:#5F6464;} .img-d-1 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-1 .st2{font-size:26.9775px;} .img-d-1 .st3{fill:#C92C2C;} .img-d-1 .st4{fill:#309D47;} .img-d-1 .st5{fill:#1990B8;} .img-d-1 .st6{font-family:'\u65b9\u6b63\u9759\u857e\u7b80\u4f53', 'microsoft yahei';} .img-d-1 .st7{font-size:24px;} .img-d-1 .st8{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-1 .st9{fill:#ED1F24;} .img-d-1 .st10{fill:none;} .img-d-1 .st11{font-size:24px;} .img-d-1 .st12{font-size:24px;}.entry p > strong{display:block; padding:10px;background:#f0f3f9;}<\/style>\n<div class=\"svg-exp\">\n<div style=\"padding-top:53%;\"><\/div>\n<p><svg viewBox=\"0 0 679 363\" class=\"img-d-1\"><text transform=\"matrix(.998 -.069 .069 .998 20.354 82.914)\"><tspan x=\"0\" y=\"0\" class=\"st0 st1 st2\">&lt;<\/tspan><tspan x=\"13.5\" y=\"0\" class=\"st3 st1 st2\">img<\/tspan><tspan x=\"54\" y=\"0\" class=\"st1 st2\"> <\/tspan><tspan x=\"67.4\" y=\"0\" class=\"st4 st1 st2\">alt<\/tspan><tspan x=\"107.9\" y=\"0\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"134.9\" y=\"0\" class=\"st5 st1 st2\">A cat<\/tspan><tspan x=\"202.3\" y=\"0\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"32.4\" class=\"st1 st2\"> <\/tspan><tspan x=\"67.4\" y=\"32.4\" class=\"st4 st1 st2\">width<\/tspan><tspan x=\"134.9\" y=\"32.4\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"161.9\" y=\"32.4\" class=\"st5 st1 st2\">320<\/tspan><tspan x=\"202.3\" y=\"32.4\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"215.8\" y=\"32.4\" class=\"st1 st2\"> <\/tspan><tspan x=\"229.3\" y=\"32.4\" class=\"st4 st1 st2\">height<\/tspan><tspan x=\"310.2\" y=\"32.4\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"337.2\" y=\"32.4\" class=\"st5 st1 st2\">213<\/tspan><tspan x=\"377.7\" y=\"32.4\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"64.7\" class=\"st1 st2\"> <\/tspan><tspan x=\"67.4\" y=\"64.7\" class=\"st4 st1 st2\">src<\/tspan><tspan x=\"107.9\" y=\"64.7\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"134.9\" y=\"64.7\" class=\"st5 st1 st2\">cat.jpg<\/tspan><tspan x=\"229.3\" y=\"64.7\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"97.1\" class=\"st1 st2\"> <\/tspan><tspan x=\"67.4\" y=\"97.1\" class=\"st4 st1 st2\">srcset<\/tspan><tspan x=\"148.4\" y=\"97.1\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"175.4\" y=\"97.1\" class=\"st5 st1 st2\">cat-2x.jpg 2x, cat-3x.jpg 3x<\/tspan><tspan x=\"553\" y=\"97.1\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><\/text><text transform=\"matrix(.994 .106 -.106 .994 420.694 31.916)\" class=\"st6 st7\">\u56fa\u5b9a\u5c3a\u5bf8\uff0c\u8fd9\u91cc\u6216CSS\u4e2d<\/text><path class=\"st8\" d=\"M428.4 79.3c45-.4 106.5-4 109.2-28.2\"><\/path><path class=\"st9\" d=\"M434 86.5l-3.2-7.2 3-7.3-17 7.4z\"><\/path><path class=\"st10\" d=\"M332.6 365.2L5 374.7 2 268.5l327.5-9.5z\"><\/path><text transform=\"matrix(1 -.029 .029 1 3.153 304.998)\"><tspan x=\"0\" y=\"0\" class=\"st6 st11\">\u4f5c\u7528\u662f\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301<\/tspan><tspan x=\"0\" y=\"41.9\" class=\"st6 st11\">srcset\u5c31\u4f7f\u75281\u500d\u56fe<\/tspan><\/text><path class=\"st8\" d=\"M76.6 138.6c-39 9-54.7 64.5-54.7 129\"><\/path><path class=\"st9\" d=\"M70.2 132.4l4 6.7-2 8 16-9.3z\"><\/path><text transform=\"matrix(.999 -.052 .052 .999 158.013 230.768)\" class=\"st6 st12\">\u56fe\u7247\u5730\u5740<\/text><text transform=\"matrix(.998 -.057 .057 .998 403.769 220.199)\" class=\"st6 st12\">\u5c4f\u5e55\u50cf\u7d20\u5bc6\u5ea6<\/text><path class=\"st8\" d=\"M292 181.4c-1.3 15.8-8.8 29.6-30.4 31.6\"><\/path><path class=\"st9\" d=\"M284.6 186.7l7.3-3 7 3.3-7-17.3z\"><\/path><path class=\"st8\" d=\"M365 177.2c3 22 12.4 30 34.7 30\"><\/path><path class=\"st9\" d=\"M358.4 183.2l7-3.6 7.4 2.4-8.7-16.4z\"><\/path><\/svg><\/div>\n<p>\u8fd9\u91cc\u51fa\u73b0\u4e86<code>srcset<\/code>\uff0c\u517c\u5bb9\u6027\u5982\u4e0b\uff1a<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"380\" src=\"http:\/\/caniuse.com\/srcset\/embed\" frameborder=\"0\"><\/iframe><\/p>\n<p><strong>3. \u5c3a\u5bf8\u548c\u5bc6\u5ea6\u90fd\u53d8\u5316<\/strong><\/p>\n<style>.img-d-2 .st0{fill:#5F6464;} .img-d-2 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-2 .st2{font-size:25.7772px;} .img-d-2 .st3{fill:#C92C2C;} .img-d-2 .st4{fill:#309D47;} .img-d-2 .st5{fill:#1990B8; white-space: pre;} .img-d-2 .st6{fill:#309D48;} .img-d-2 .st7{fill:none;} .img-d-2 .st8{font-family:'\u65b9\u6b63\u9759\u857e\u7b80\u4f53', 'microsoft yahei';} .img-d-2 .st9{font-size:24px;} .img-d-2 .st10{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-2 .st11{fill:#ED1F24;}<\/style>\n<div class=\"svg-exp\">\n<div style=\"padding-top: 77%\"><\/div>\n<p>  <svg viewBox=\"0 0 679 524\" class=\"img-d-2\"><text transform=\"matrix(1 -.026 .026 1 1.971 35.909)\"><tspan x=\"0\" y=\"0\" class=\"st0 st1 st2\">&lt;<\/tspan><tspan x=\"12.9\" y=\"0\" class=\"st3 st1 st2\">img<\/tspan><tspan x=\"51.6\" y=\"0\" class=\"st1 st2\"> <\/tspan><tspan x=\"64.4\" y=\"0\" class=\"st4 st1 st2\">alt<\/tspan><tspan x=\"103.1\" y=\"0\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"128.9\" y=\"0\" class=\"st5 st1 st2\">A red panda eating leaves<\/tspan><tspan x=\"451.1\" y=\"0\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"30.9\" class=\"st1 st2\"> <\/tspan><tspan x=\"64.4\" y=\"30.9\" class=\"st4 st1 st2\">src<\/tspan><tspan x=\"103.1\" y=\"30.9\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"128.9\" y=\"30.9\" class=\"st5 st1 st2\">panda-689.jpg<\/tspan><tspan x=\"296.4\" y=\"30.9\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"61.9\" class=\"st1 st2\"> <\/tspan><tspan x=\"64.4\" y=\"61.9\" class=\"st4 st1 st2\">srcset<\/tspan><tspan x=\"141.8\" y=\"61.9\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"167.6\" y=\"61.9\" class=\"st5 st1 st2\">panda-689.jpg 689w,<\/tspan><tspan x=\"0\" y=\"92.8\" class=\"st5 st1 st2\">             panda-1378.jpg 1378w,<\/tspan><tspan x=\"0\" y=\"123.7\" class=\"st5 st1 st2\">             panda-500.jpg 500w,<\/tspan><tspan x=\"0\" y=\"154.7\" class=\"st5 st1 st2\">             panda-1000.jpg 1000w<\/tspan><tspan x=\"425.3\" y=\"154.7\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"247.5\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"64.4\" y=\"247.5\" class=\"st6 st1 st2\">sizes<\/tspan><tspan x=\"128.9\" y=\"247.5\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"154.7\" y=\"247.5\" class=\"st5 st1 st2\">(min-width: 1066px) 689px,<\/tspan><tspan x=\"0\" y=\"278.4\" class=\"st5 st1 st2\">            (min-width: 800px) calc(75vw &#8211; 137px),<\/tspan><tspan x=\"0\" y=\"309.3\" class=\"st5 st1 st2\">            (min-width: 530px) calc(100vw &#8211; 96px),<\/tspan><tspan x=\"0\" y=\"340.3\" class=\"st5 st1 st2\">            100vw<\/tspan><tspan x=\"219.1\" y=\"340.3\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><\/text><path class=\"st7\" d=\"M697.2 153.5L459.8 126l11-95.3 237.5 27.5z\"><\/path><text transform=\"matrix(.993 .115 -.115 .993 466.83 65.475)\"><tspan x=\"0\" y=\"0\" class=\"st8 st9\">\u4e13\u95e8\u7ed9\u4e0d\u652f\u6301<\/tspan><tspan x=\"0\" y=\"40\" class=\"st8 st9\">srcset\u6d4f\u89c8\u5668\u7559\u7684<\/tspan><\/text><g><g><path class=\"st10\" d=\"M329.8 50c73.8-2 94.6 13.3 128 14.8\"><\/path><g><path class=\"st11\" d=\"M335.5 57l-3.3-7.2 2.8-7.3-17 7.8z\"><\/path><\/g><\/g><\/g><text transform=\"matrix(.994 -.108 .108 .994 65.622 254.292)\" class=\"st8 st9\">\u56fe\u7247\u5730\u5740<\/text><text transform=\"matrix(.993 -.122 .122 .993 416.958 245.847)\" class=\"st8 st9\">\u56fe\u7247\u5bbd\u5ea6\u6570\u636e<\/text><g><g><path class=\"st10\" d=\"M196 203.3c-1.8 19.4-14.4 33.3-36 34.3\"><\/path><g><path class=\"st11\" d=\"M188.6 208.7l7.3-3 7 3-7-17z\"><\/path><\/g><\/g><\/g><g><g><path class=\"st10\" d=\"M384.7 199c1 26.7 11 41 28.2 41\"><\/path><g><path class=\"st11\" d=\"M377.6 204.7l7.2-3.2 7.3 3-7-17z\"><\/path><\/g><\/g><\/g><text transform=\"matrix(1 .027 -.027 1 165.881 415.307)\" class=\"st8 st9\">\u7a97\u4f53\u5bbd\u5ea6<\/text><text transform=\"matrix(.999 -.05 .05 .999 447.409 407.548)\"><tspan x=\"0\" y=\"0\" class=\"st8 st9\">\u6761\u4ef6\u5339\u914d\u65f6\u5019<\/tspan><tspan x=\"-15\" y=\"40\" class=\"st8 st9\">\u7684\u56fe\u7247\u5bbd\u5ea6<\/tspan><\/text><g><g><path class=\"st10\" d=\"M356.5 357.6c1 19.7-1.4 39-23 40\"><\/path><g><path class=\"st11\" d=\"M349.6 363.5l7-3.5 7.4 2.6-8.3-16.6z\"><\/path><\/g><\/g><\/g><g><g><path class=\"st10\" d=\"M427.6 354c-3.7 22-8.4 67 17.7 65.3\"><\/path><g><path class=\"st11\" d=\"M419.5 358l7.7-1.5 6.5 4.3-4-18z\"><\/path><\/g><\/g><\/g><path class=\"st7\" d=\"M31.4 428h257v109h-257z\"><\/path><text transform=\"translate(31.431 463)\"><tspan x=\"0\" y=\"0\" class=\"st8 st9\">\u5f53\u6ca1\u6709\u6761\u4ef6\u5339\u914d<\/tspan><tspan x=\"0\" y=\"40\" class=\"st8 st9\">\u65f6\u5019\u9884\u7559\u7684\u9000\u8def<\/tspan><\/text><g><g><path class=\"st10\" d=\"M148.3 368C100 375.2 94 428 94 428\"><\/path><g><path class=\"st11\" d=\"M142.2 361.3l3.7 7-2.7 7.4L160 367z\"><\/path><\/g><\/g><\/g><\/svg>\n<\/div>\n<p><strong>4. \u5c3a\u5bf8\uff0c\u5bc6\u5ea6\uff0c\u8d44\u6e90\u90fd\u53d8\u5316<\/strong><\/p>\n<style>.img-d-3 .st0{fill:#5F6464; white-space: pre;} .img-d-3 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-3 .st2{font-size:24.2164px;} .img-d-3 .st3{fill:#C92C2C;} .img-d-3 .st4{fill:#309D47;} .img-d-3 .st5{fill:#1990B8; white-space: pre;} .img-d-3 .st6{fill:none;} .img-d-3 .st7{font-family:'\u65b9\u6b63\u9759\u857e\u7b80\u4f53', 'microsoft yahei';} .img-d-3 .st8{font-size:24px;} .img-d-3 .st9{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-3 .st10{fill:#ED1F24;}<\/style>\n<div class=\"svg-exp\">\n<div style=\"padding-top: 82%\"><\/div>\n<p>  <svg class=\"img-d-3\" viewBox=\"0 0 679 555\"><text transform=\"matrix(1 -.018 .018 1 3.572 23.804)\"><tspan x=\"0\" y=\"0\" class=\"st0 st1 st2\">&lt;<\/tspan><tspan x=\"12.1\" y=\"0\" class=\"st3 st1 st2\">picture<\/tspan><tspan x=\"96.9\" y=\"0\" class=\"st0 st1 st2\">&gt;<\/tspan><tspan x=\"0\" y=\"29.1\" class=\"st0 st1 st2\">  &lt;<\/tspan><tspan x=\"36.3\" y=\"29.1\" class=\"st3 st1 st2\">source<\/tspan><tspan x=\"109\" y=\"29.1\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"121.1\" y=\"29.1\" class=\"st4 st1 st2\">media<\/tspan><tspan x=\"181.6\" y=\"29.1\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"205.8\" y=\"29.1\" class=\"st5 st1 st2\">(max-width: 800px)<\/tspan><tspan x=\"423.8\" y=\"29.1\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"174.4\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"121.1\" y=\"174.4\" class=\"st4 st1 st2\">srcset<\/tspan><tspan x=\"193.7\" y=\"174.4\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"217.9\" y=\"174.4\" class=\"st5 st1 st2\">f1-focused-800.jpg 800w,<\/tspan><tspan x=\"0\" y=\"203.4\" class=\"st5 st1 st2\">                  f1-focused-1406.jpg 1406w<\/tspan><tspan x=\"520.7\" y=\"203.4\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"232.5\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"121.1\" y=\"232.5\" class=\"st4 st1 st2\">sizes<\/tspan><tspan x=\"181.6\" y=\"232.5\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"205.8\" y=\"232.5\" class=\"st5 st1 st2\">(min-width: 530px) calc(100vw &#8211; 96px),<\/tspan><tspan x=\"0\" y=\"261.5\" class=\"st5 st1 st2\">                 100vw<\/tspan><tspan x=\"266.4\" y=\"261.5\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><tspan x=\"0\" y=\"290.6\" class=\"st0 st1 st2\">  &lt;<\/tspan><tspan x=\"36.3\" y=\"290.6\" class=\"st3 st1 st2\">img<\/tspan><tspan x=\"72.6\" y=\"290.6\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"84.8\" y=\"290.6\" class=\"st4 st1 st2\">alt<\/tspan><tspan x=\"121.1\" y=\"290.6\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"145.3\" y=\"290.6\" class=\"st5 st1 st2\">F1 car in the gravel<\/tspan><tspan x=\"387.5\" y=\"290.6\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"319.7\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"84.8\" y=\"319.7\" class=\"st4 st1 st2\">src<\/tspan><tspan x=\"121.1\" y=\"319.7\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"145.3\" y=\"319.7\" class=\"st5 st1 st2\">f1-689.jpg<\/tspan><tspan x=\"266.4\" y=\"319.7\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"348.7\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"84.8\" y=\"348.7\" class=\"st4 st1 st2\">srcset<\/tspan><tspan x=\"157.4\" y=\"348.7\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"181.6\" y=\"348.7\" class=\"st5 st1 st2\">f1-689.jpg 689w,<\/tspan><tspan x=\"0\" y=\"377.8\" class=\"st5 st1 st2\">               f1-1378.jpg 1378w,<\/tspan><tspan x=\"0\" y=\"406.8\" class=\"st5 st1 st2\">               f1-500.jpg 500w,<\/tspan><tspan x=\"0\" y=\"435.9\" class=\"st5 st1 st2\">               f1-1000.jpg 1000w<\/tspan><tspan x=\"387.5\" y=\"435.9\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"465\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"84.8\" y=\"465\" class=\"st4 st1 st2\">sizes<\/tspan><tspan x=\"145.3\" y=\"465\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"169.5\" y=\"465\" class=\"st5 st1 st2\">(min-width: 1066px) 689px,<\/tspan><tspan x=\"0\" y=\"494\" class=\"st5 st1 st2\">              calc(75vw &#8211; 137px)<\/tspan><tspan x=\"387.5\" y=\"494\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><tspan x=\"0\" y=\"523.1\" class=\"st0 st1 st2\">&lt;\/<\/tspan><tspan x=\"24.2\" y=\"523.1\" class=\"st3 st1 st2\">picture<\/tspan><tspan x=\"109\" y=\"523.1\" class=\"st0 st1 st2\">&gt;<\/tspan><\/text><path class=\"st6\" d=\"M336.5 166.3l-305 2.5-1-98 305-2.4z\"><\/path><text transform=\"matrix(1 -.008 .008 1 30.88 105.816)\"><tspan x=\"0\" y=\"0\" class=\"st7 st8\">\u5982\u679c\u7a97\u4f53\u5339\u914d\u8be5\u67e5\u8be2\uff0c<\/tspan><tspan x=\"0\" y=\"40\" class=\"st7 st8\">\u8fd9\u662f\u8fd9\u4e9b\u53bb\u786e\u5b9asrc<\/tspan><\/text><path class=\"st9\" d=\"M387.2 68.6c-6 44.8-47.7 41-47.7 41\"><\/path><path class=\"st10\" d=\"M379.5 73.5L387 71l7 3.6-6-17.6z\"><\/path><path class=\"st9\" d=\"M102.5 213C74.8 202.5 82 153.6 82 153.6\"><\/path><path class=\"st10\" d=\"M98.6 204.5l1.6 7.7-4.4 6.4L114 215z\"><\/path><text transform=\"translate(462 349)\" class=\"st7 st8\">\u2026\u5426\u5219\u4f7f\u7528\u8fd9\u4e9b<\/text><path class=\"st9\" d=\"M450.6 425.2C505.8 420 533 396.5 533 360\"><\/path><path class=\"st10\" d=\"M456.6 432l-3.6-7 2.5-7.5L439 426z\"><\/path><\/svg>\n<\/div>\n<p><strong>5. \u4e0d\u540c\u7684\u56fe\u7247\u7c7b\u522b<\/strong><\/p>\n<style>.img-d-4 .st0{fill:#5F6464; white-space: pre;} .img-d-4 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-4 .st2{font-size:25.7851px;} .img-d-4 .st3{fill:#C92C2C;} .img-d-4 .st4{fill:#309D47;} .img-d-4 .st5{fill:#1990B8;} .img-d-4 .st6{fill:none;} .img-d-4 .st7{font-family:'\u65b9\u6b63\u9759\u857e\u7b80\u4f53', 'microsoft yahei';} .img-d-4 .st8{font-size:24px;} .img-d-4 .st9{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-4 .st10{fill:#ED1F24;}<\/style>\n<div class=\"svg-exp\">\n<div style=\"padding-top:28%\"><\/div>\n<p>  <svg class=\"img-d-4\" viewBox=\"0 0 679 187\"><text transform=\"matrix(1 -.018 .018 1 3.594 22.076)\"><tspan x=\"0\" y=\"0\" class=\"st0 st1 st2\">&lt;<\/tspan><tspan x=\"12.9\" y=\"0\" class=\"st3 st1 st2\">picture<\/tspan><tspan x=\"103.1\" y=\"0\" class=\"st0 st1 st2\">&gt;<\/tspan><tspan x=\"0\" y=\"30.9\" class=\"st0 st1 st2\">  &lt;<\/tspan><tspan x=\"38.7\" y=\"30.9\" class=\"st3 st1 st2\">source<\/tspan><tspan x=\"116\" y=\"30.9\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"128.9\" y=\"30.9\" class=\"st4 st1 st2\">type<\/tspan><tspan x=\"180.5\" y=\"30.9\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"206.3\" y=\"30.9\" class=\"st5 st1 st2\">image\/webp<\/tspan><tspan x=\"335.2\" y=\"30.9\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"61.9\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"128.9\" y=\"61.9\" class=\"st4 st1 st2\">srcset<\/tspan><tspan x=\"206.3\" y=\"61.9\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"232.1\" y=\"61.9\" class=\"st5 st1 st2\">snow.webp<\/tspan><tspan x=\"348.1\" y=\"61.9\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><tspan x=\"0\" y=\"92.8\" class=\"st0 st1 st2\">  &lt;<\/tspan><tspan x=\"38.7\" y=\"92.8\" class=\"st3 st1 st2\">img<\/tspan><tspan x=\"77.4\" y=\"92.8\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"90.2\" y=\"92.8\" class=\"st4 st1 st2\">alt<\/tspan><tspan x=\"128.9\" y=\"92.8\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"154.7\" y=\"92.8\" class=\"st5 st1 st2\">Hut in the snow<\/tspan><tspan x=\"348.1\" y=\"92.8\" class=\"st0 st1 st2\">&#8220;<\/tspan><tspan x=\"0\" y=\"123.8\" class=\"st0 st1 st2\"> <\/tspan><tspan x=\"90.2\" y=\"123.8\" class=\"st4 st1 st2\">src<\/tspan><tspan x=\"128.9\" y=\"123.8\" class=\"st0 st1 st2\">=&#8221;<\/tspan><tspan x=\"154.7\" y=\"123.8\" class=\"st5 st1 st2\">snow.jpg<\/tspan><tspan x=\"257.9\" y=\"123.8\" class=\"st0 st1 st2\">&#8220;&gt;<\/tspan><tspan x=\"0\" y=\"154.7\" class=\"st0 st1 st2\">&lt;\/<\/tspan><tspan x=\"25.8\" y=\"154.7\" class=\"st3 st1 st2\">picture<\/tspan><tspan x=\"116\" y=\"154.7\" class=\"st0 st1 st2\">&gt;<\/tspan><\/text><path class=\"st6\" d=\"M659 110.7l-228.7 2-.8-98 228.6-2z\"><\/path><text transform=\"matrix(1 -.008 .008 1 429.879 49.61)\"><tspan x=\"0\" y=\"0\" class=\"st7 st8\">\u5982\u679c\u8fd9\u79cd\u7c7b\u578b\u652f\u6301\uff0c <\/tspan><tspan x=\"0\" y=\"40\" class=\"st7 st8\">\u4f7f\u7528\u8fd9\u4e2a<\/tspan><\/text><path class=\"st9\" d=\"M368.6 40c37.6-2 58-2 58-2\"><\/path><path class=\"st10\" d=\"M374.4 47l-3.4-7 2.8-7.4-16.8 8z\"><\/path><path class=\"st9\" d=\"M395 69.5c33.7-1 34.5 2.8 34.5 2.8\"><\/path><path class=\"st10\" d=\"M401 76.5l-3.5-7 2.8-7.4-16.8 8z\"><\/path><text transform=\"translate(366 141.5)\" class=\"st7 st8\">\u2026\u5426\u5219\u8fd9\u4e2a<\/text><path class=\"st9\" d=\"M307 133.4c37.3-1.5 55.5.5 55.5.5\"><\/path><path class=\"st10\" d=\"M313 140.6l-3.5-7 2.8-7.4-16.8 7.8z\"><\/path><\/svg>\n<\/div>\n<h3>\u4e8c\u3001\u76f4\u63a5\u7ed3\u8bed<\/h3>\n<p>\u672c\u6587\u4e3b\u8981\u56fe\u89e3\u4e86\u51e0\u79cdHTML\u4fa7\u7684\u54cd\u5e94\u5f0f\u56fe\u7247\u7684\u7528\u6cd5\u8bf4\u660e\uff0c\u5e0c\u671b\u53ef\u4ee5\u5bf9\u79fb\u52a8\u7aef\u540c\u5b66\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n<p>\u4ee5\u4e0a~<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/14.gif\" align=\"absmiddle\" height=\"24\"><\/p>\n<p>\u6700\u540e\uff0c\u795d\u5927\u5bb6\u4eca\u5929\u80fd\u9047\u5230\u5982\u4e0b\u56fe\u6240\u793a\u7684\u597d\u4e8b\u60c5\uff01<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201511\/moxiong.jpg\" width=\"320\" height=\"235\" alt=\"\u6478\u80f8\u90e8\" class=\"alignnone\" \/><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=5045\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=5045<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u4e3b\u8981\u56fe\u89e3\u4e86\u51e0\u79cdHTML\u4fa7\u7684\u54cd\u5e94\u5f0f\u56fe\u7247\u7684\u7528\u6cd5\u8bf4\u660e\uff0c\u5e0c\u671b\u53ef\u4ee5\u5bf9\u79fb\u52a8\u7aef\u540c\u5b66\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1027,1025,950,1026,949,947],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/5045"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5045"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/5045\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}