{"id":1197,"date":"2022-05-11T14:46:21","date_gmt":"2022-05-11T06:46:21","guid":{"rendered":"http:\/\/limitironbox.myds.me\/wordpress\/?p=1197"},"modified":"2022-05-11T15:03:31","modified_gmt":"2022-05-11T07:03:31","slug":"html%e7%9a%84%e9%9a%a8-rwd-%e7%b6%b2%e9%a0%81%e8%87%aa%e5%8b%95%e7%b8%ae%e6%94%be","status":"publish","type":"post","link":"https:\/\/limitironbox.myds.me\/wordpress\/html%e7%9a%84%e9%9a%a8-rwd-%e7%b6%b2%e9%a0%81%e8%87%aa%e5%8b%95%e7%b8%ae%e6%94%be\/","title":{"rendered":"HTML \u7684 iframe \u6a19\u7c64\u96a8 RWD \u7db2\u9801\u81ea\u52d5\u7e2e\u653e"},"content":{"rendered":"<p>\u7576\u9700\u8981\u4f7fyoutube\u5f71\u7247\uff0c\u53ef\u4ee5\u5728RWD\u7db2\u9801\u4e2d\u986f\u793a\u7684\u5927\u5c0f\u96a8\u8457\u8996\u7a97\u653e\u5927\u3001\u7e2e\u5c0f\u6642\uff0c<\/p>\n<p>\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u65b9\u6cd5\uff0c\u6b64\u6cd5\u5c0d\u65bc iframe \u7684\u76f8\u95dc\u7269\u4ef6\u7686\u6709\u6548\u679c \uff0c<\/p>\n<div>&lt;div style=&#8221;text-align: center;&#8221;&gt;<\/div>\n<div>&lt;style&gt;<\/div>\n<div>\u00a0 \u00a0 .youtube {<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 position: relative;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 padding-bottom: 56%; \/\/ This is the aspect ratio<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/div>\n<div>\u00a0 \u00a0 }<\/div>\n<div>\u00a0 \u00a0 .youtube iframe {<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 position: absolute;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 top: 0;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 left: 0;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 width: 100% !important;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 height: 100% !important;<\/div>\n<div>\u00a0 \u00a0 }<\/div>\n<div>&lt;\/style&gt;<\/div>\n<div>\u00a0&lt;div class=&#8221;youtube&#8221;&gt;<\/div>\n<div>\u00a0 \u00a0 &lt;iframe src=&#8221;https:\/\/www.youtube.com\/embed\/\u4f60\u7684youtube\u5f71\u7247ID&#8221; width=&#8221;854&#8243; height=&#8221;480&#8243; frameborder=&#8221;0&#8243; style=&#8221;border:0&#8243;&gt;&lt;\/iframe&gt;&lt;\/div&gt;<\/div>\n<hr \/>\n<p>\u539f\u7406\u662f\u4f7f\u7528 .youtube \u88e1\u7684<span style=\"color: #ff0000;\"> padding-bottom<\/span> \u5c6c\u6027\u5c07 iframe \u6490\u958b\uff0c\u9019\u88e1\u4f7f\u7528 56% \u662f\u56e0\u70ba iframe \u8d77\u59cb\u503c\u7684 width \u70ba 854 \u800c height \u70ba 480\uff0c\u6240\u4ee5 height \u6c38\u9060\u70ba width \u7684 0.56 \uff0c\u56e0\u6b64\u5f97\u523056%\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1205\" src=\"http:\/\/limitironbox.myds.me\/wordpress\/wp-content\/uploads\/2022\/05\/Difference-Between-Padding-and-Margin.png\" alt=\"\" width=\"500\" height=\"550\" srcset=\"https:\/\/limitironbox.myds.me\/wordpress\/wp-content\/uploads\/2022\/05\/Difference-Between-Padding-and-Margin.png 500w, https:\/\/limitironbox.myds.me\/wordpress\/wp-content\/uploads\/2022\/05\/Difference-Between-Padding-and-Margin-273x300.png 273w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<div>\n<div><strong><span style=\"color: #ff0000;\">\u6ce8\u610f\uff1a<\/span><\/strong><\/div>\n<\/div>\n<div>yourtube\u9023\u7d50\u8981\u81ea\u5df1\u8abf\u6574<\/div>\n<div>padding-bottom\u8981\u81ea\u884c\u8abf\u6574\u6bd4\u4f8b<\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7576\u9700\u8981\u4f7fyoutube\u5f71\u7247\uff0c\u53ef\u4ee5\u5728RWD&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pmpro_default_level":""},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/posts\/1197"}],"collection":[{"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/comments?post=1197"}],"version-history":[{"count":13,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/posts\/1197\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/posts\/1197\/revisions\/1211"}],"wp:attachment":[{"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/media?parent=1197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/categories?post=1197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/limitironbox.myds.me\/wordpress\/wp-json\/wp\/v2\/tags?post=1197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}