{"id":299,"date":"2014-11-04T10:56:23","date_gmt":"2014-11-04T02:56:23","guid":{"rendered":"https:\/\/aweidesign.why3s.tw\/wp2\/?p=299"},"modified":"2015-03-26T16:27:34","modified_gmt":"2015-03-26T08:27:34","slug":"awei%e7%a0%94%e7%a9%b6%e5%ae%a4responsive-web-design%e8%87%aa%e9%81%a9%e6%87%89%e7%b6%b2%e9%a0%81%e8%a8%ad%e8%a8%88%e7%9c%9f%e7%9a%84%e9%81%a9%e5%90%88%e5%a6%b3%e7%9a%84%e7%b6%b2%e7%ab%99","status":"publish","type":"post","link":"https:\/\/aweidesign.why3s.tw\/wp2\/299\/awei%e7%a0%94%e7%a9%b6%e5%ae%a4responsive-web-design%e8%87%aa%e9%81%a9%e6%87%89%e7%b6%b2%e9%a0%81%e8%a8%ad%e8%a8%88%e7%9c%9f%e7%9a%84%e9%81%a9%e5%90%88%e5%a6%b3%e7%9a%84%e7%b6%b2%e7%ab%99","title":{"rendered":"[awei\u7814\u7a76\u5ba4]Responsive web design,\u81ea\u9069\u61c9\u7db2\u9801\u8a2d\u8a08\u771f\u7684\u9069\u5408\u59b3\u7684\u7db2\u7ad9?"},"content":{"rendered":"<h1><span style=\"color: #ff0000;\"><em>Responsive web design<\/em> (<em>RWD<\/em>)<\/span><\/h1>\n<h3 class=\"r\">\u97ff\u61c9\u5f0f\u7db2\u9801\u8a2d\u8a08(Responsive Web Design)\u4e5f\u53ef\u4ee5\u53eb\u505a\u81ea\u9069\u61c9\u7db2\u9801\u8a2d\u8a08.<\/h3>\n<p>\u5728\u4e0d\u540c\u89e3\u50cf\u5ea6\u4e0b\u6539\u8b8a\u7db2\u9801\u9801\u9762\u7684\u4f48\u5c40\uff0c\u7684\u8b93\u4e0d\u540c\u7684\u8a2d\u5099\u90fd\u53ef\u4ee5\u6b63\u5e38\u700f\u89bd\u540c\u4e00\u7db2\u7ad9\uff0c\u63d0\u4f9b\u8996\u89ba\u6700\u4f73\u5316.<\/p>\n<p>\u7c21\u55ae\u7684\u4f86\u8aaa\u5c31\u662f\u4f60\u53ef\u4ee5\u5728\u4e0d\u540c\u5e73\u53f0\u3001\u4e0d\u540c\u5c3a\u5bf8\u7684\u88dd\u7f6e(iOS, Android, Windows)\u90fd\u80fd\u7121\u969c\u7919\u7684\u89c0\u770b\u7db2\u9801,\u800c\u4e0d\u6703\u56e0\u70ba\u4f60\u7684\u8a2d\u5099\u5c0e\u81f4\u95b1\u8b80\u8cc7\u8a0a\u6709\u6240\u907a\u6f0f<\/p>\n<p><a href=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-0.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-301\" src=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-0.jpg\" alt=\"responweb-0\" width=\"680\" height=\"408\" srcset=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-0.jpg 680w, https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-0-300x180.jpg 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/p>\n<h3 class=\"color\">\u70ba\u4ec0\u9ebc\u8981\u505a\u81ea\u9069\u61c9\u7db2\u9801 Responsive Web Design\uff1f<\/h3>\n<p>\u96a8\u8457\u884c\u52d5\u7db2\u8def\u7684\u767c\u5c55\u4ee5\u53ca\u5404\u7a2e\u5e73\u677f\u3001\u667a\u6167\u578b\u624b\u6a5f\u5e73\u53f0\u7684\u76db\u884c\uff0c\u4e0d\u53ea\u662f\u5728\u53f0\u7063\uff0c\u5168\u4e16\u754c\u90fd\u8ddf\u8457\u9019\u500b\u6f6e\u6d41\u8d70\u3002\u6bcf\u6bcf\u65b0\u624b\u6a5f\u578b\u865f\u554f\u4e16,\u7e3d\u662f\u6709\u4e00\u5806\u7c89\u7d72\u6436\u8cfc\u8ddf\u9032\uff0c\u884c\u52d5\u88dd\u7f6e(\u624b\u6a5f\/\u5e73\u7248)\u87a2\u5e55\u5927\u5c0f\u65e5\u65b0\u6708\u7570\uff0c \u800c\u4ee5\u76ee\u524d\u4e3b\u6d41\u88dd\u7f6e\u7684\u89e3\u6790\u5ea6\u4f86\u770b\uff0c5.5\u540b1280\u00d7720\uff0c4.7\u540b1134 x 750 pixels\u56e0\u6b64\u8981\u8b93\u6bcf\u7a2e\u88dd\u7f6e\u90fd\u80fd\u9806\u66a2\u700f\u89bd\uff0c\u4e0d\u53ea\u8003\u9a57\u5de5\u7a0b\u5e2b\u7684\u529f\u529b\uff0c\u4e5f\u975e\u5e38\u8003\u9a57\u524d\u7aef\u7db2\u9801\u8a2d\u8a08\u7684\u8996\u89ba\u7f8e\u611f\uff0c\u8207\u5f8c\u7aef\u591a\u87a2\u6e2c\u8a66\u7684\u8010\u6027\u3002<\/p>\n<p>\u81ea\u9069\u61c9\u7db2\u9801\u8a2d\u8a08\u7684\u4e3b\u8981\u6838\u5fc3\u6280\u8853\u662fcss3 media query\uff0c\u5728CSS3\u4e2d\u6211\u5011\u53ef\u4ee5\u8a2d\u7f6e\u4e0d\u540c\u985e\u578b\u7684\u5a92\u9ad4\u689d\u4ef6\uff0c\u4e26\u6839\u64da\u5c0d\u61c9\u7684\u689d\u4ef6\uff0c\u7d66\u76f8\u61c9\u7b26\u5408\u689d\u4ef6\u7684\u5e73\u53f0\u5a92\u9ad4\u8abf\u7528\u76f8\u5c0d\u61c9\u7684\u6a23\u5f0f\u8868\u3002<\/p>\n<p><a href=\"http:\/\/aweidesign.why3s.tw\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-302\" src=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-1.jpg\" alt=\"responweb-1\" width=\"680\" height=\"448\" srcset=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-1.jpg 680w, https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/responweb-1-300x197.jpg 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/p>\n<hr \/>\n<p>\u9019\u88e1\u6709\u4e00\u500b\u7bc4\u4f8b\u8490\u96c6\u7684\u7db2\u7ad9\uff0c\u7db2\u7ad9\u540d\u7a31\u5c31\u53eb\u505a\u300c<a href=\"http:\/\/mediaqueri.es\/\">Media Queries<\/a>\u300d<\/p>\n<p>\u7db2\u5740\uff1a<a href=\"http:\/\/mediaqueri.es\/\">http:\/\/mediaqueri.es\/<\/a>\u3002\u4f60\u53ef\u4ee5\u7528\u4f60\u7684\u63a8\u7279\u5e33\u865f\u767b\u5165\u4e26\u4e14\u9001\u51fa\u60a8\u7684\u7db2\u7ad9\u4f9b\u5225\u4eba\u7968\u9078<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-308\" src=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/resp_media.jpg\" alt=\"resp_media\" width=\"680\" height=\"1038\" srcset=\"https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/resp_media.jpg 680w, https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/resp_media-196x300.jpg 196w, https:\/\/aweidesign.why3s.tw\/wp2\/wp-content\/uploads\/2014\/11\/resp_media-670x1024.jpg 670w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><!--more--><\/p>\n<hr \/>\n<h3 class=\"color\">\u8981\u5982\u4f55\u505a\u81ea\u9069\u61c9\u7db2\u9801 Responsive Web Design?<\/h3>\n<p>\u9996\u5148\u6211\u5011\u5fc5\u9808\u4e86\u89e3.RWD\u5176\u5be6\u662f\u5229\u7528CSS\u53bb\u898f\u7bc4\u7db2\u9801\u7684\u7248\u9762\u5927\u5c0f\u5448\u73fe\u65b9\u5f0f.\u4f46\u8acb\u6ce8\u610f<\/p>\n<ul>\n<li>\u652f\u63f4\u72c0\u6cc1\uff1a\u9664 <strong>IE8 \u4ee5\u4e0b\u4e0d\u652f\u63f4<\/strong> \u5916\uff0c\u5176\u9918\u8f03\u65b0\u6b3e\u700f\u89bd\u5668\u63a5\u7686\u652f\u63f4\uff08\u8a73\u7d30\u652f\u63f4\u72c0\u6cc1\uff1a<a href=\"http:\/\/caniuse.com\/css-mediaqueries\">http:\/\/caniuse.com\/css-mediaqueries<\/a>\uff09<\/li>\n<\/ul>\n<p>\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u5efa\u7acb\u7db2\u7ad9\u5c0e\u5165\u6642\u8f09\u5165\u7684CSS<br \/>\n\u6211\u7684\u7fd2\u6163\u662f\u5efa\u7acb\u4e00\u500b\u540d\u53eb<span style=\"color: #ff0000;\">responsive.css<\/span>\u7684\u6a94\u6848,\u7576\u7136\u88e1\u9762\u5c31\u662f\u5beb\u6211\u5011\u7684Media Queries<\/p>\n<p>\u4e0b\u9762\u5c31\u662f\u793a\u7bc4\u5167\u5bb9<\/p>\n<table style=\"height: 588px; background-color: #fff7b8;\" width=\"843\">\n<tbody>\n<tr>\n<td>\n<div><span style=\"color: #008000;\">@media (min-width: 768px) and (max-width: 979px) {<\/span><\/div>\n<div><span style=\"color: #ff0000;\">\/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6\u4ecb\u65bc 768px ~ 979px\uff0c\u5c07\u6703\u518d\u8f09\u5165\u9019\u88e1\u7684 CSS\u3002<\/span><br \/>\n.hidden-desktop {<br \/>\ndisplay: inherit !important;<br \/>\n}<br \/>\n.visible-desktop {<br \/>\ndisplay: none !important ;<br \/>\n}<br \/>\n}<br \/>\n<span style=\"color: #008000;\">@media (max-width: 767px) {<\/span><\/div>\n<div><span style=\"color: #ff0000;\">\/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6 &lt;= 767px\uff0c\u5c07\u6703\u518d\u8f09\u5165\u9019\u88e1\u7684 CSS\u3002<\/span><br \/>\n.row:before,<br \/>\n.row:after {<br \/>\ndisplay: table;<br \/>\ncontent: &#8220;&#8221;;<br \/>\nline-height: 0;<br \/>\n}<br \/>\n.row-fluid .thumbnails {<br \/>\nmargin-left: 0;<br \/>\n}<br \/>\n}<\/div>\n<p><span style=\"color: #008000;\">@media (max-width: 480px) {<br \/>\n<span style=\"color: #ff0000;\">\/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6 &lt;= 480px\uff0c\u5c07\u6703\u518d\u8f09\u5165\u9019\u88e1\u7684 CSS\u3002<\/span><br \/>\n<\/span>.nav-collapse {<br \/>\n-webkit-transform: translate3d(0, 0, 0);<\/p>\n<p>}<br \/>\n.page-header h1 small {<br \/>\ndisplay: block;<br \/>\nline-height: 20px;<br \/>\n}<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>PS:\u73fe\u5728\u770b\u8d77\u4f86\u597d\u50cf\u5f88\u7c21\u55ae,\u597d\u50cf\u53ea\u8981\u628a\u76f8\u5c0d\u61c9\u7684\u88dd\u7f6e\u5bec\u5ea6\u8a2d\u5b9a\u597d.\u53ea\u8981\u5207\u63db\u5230\u76f8\u7b26\u7684\u88dd\u7f6e\u5c31\u6703\u81ea\u52d5\u547c\u53ebCSS<br \/>\n\u5176\u5be6\u9084\u6709\u5f88\u591a\u5c0f\u7d30\u7bc0\u85cf\u5728\u88e1\u9762.<\/p>\n<p>1.\u56e0\u70ba\u88dd\u7f6e\u7684\u7a2e\u985e\u5f88\u591a\u6211\u5011\u4e0d\u53ef\u80fd\u91dd\u5c0d\u6bcf\u500b\u88dd\u7f6e\u89e3\u6790\u5ea6\u5beb\u51fa\u9069\u5408\u7684CSS\u898f\u7bc4<br \/>\n2.\u5beb\u51fa\u4f86\u7684responsive.css\u53ef\u80fd\u9577\u7684\u6709\u9ede\u96e2\u8b5c.\u5c0e\u81f4\u8f09\u5165\u6642\u9593\u904e\u9577.\u96fb\u8166\u8ca0\u64d4\u904e\u5927<span style=\"color: #ff0000;\">(\u53ef\u4ee5\u628a\u4ed6\u5206\u958b\u5beba.css\/b.css\u7b49)<\/span><\/p>\n<p>Media Queries \u53ef\u4ee5\u8b93\u4f60\u80fd\u5920\u5728\u4e0d\u540c\u88dd\u7f6e\u6216\u89e3\u6790\u5ea6\u4e0a\u505a\u8abf\u6574\uff0c\u4f46\u662f\u6bcf\u500b\u4eba\u7684\u7db2\u7ad9\u683c\u5f0f\u4e26\u4e0d\u76f8\u540c\u6240\u4ee5\u9084\u662f\u8981\u770b CSS\u5982\u4f55\u53bb\u7de8\u5beb\u6bd4\u8f03\u91cd\u8981\u4e86<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive web design (RWD) \u97ff\u61c9\u5f0f\u7db2\u9801\u8a2d\u8a08(Responsive Web Desi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,111],"tags":[56,57],"class_list":["post-299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-classroom","category-za","tag-responsive-web-design","tag-57"],"_links":{"self":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":7,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/299\/revisions\/313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}