{"id":463,"date":"2015-06-25T04:50:32","date_gmt":"2015-06-25T04:50:32","guid":{"rendered":"https:\/\/samwebman.wordpress.com\/?p=463"},"modified":"2015-06-25T04:50:32","modified_gmt":"2015-06-25T04:50:32","slug":"responsive-web-design-rwd-%e5%92%8c-adaptive-web-design-awd","status":"publish","type":"post","link":"https:\/\/www.intentrust.com\/?p=463","title":{"rendered":"Responsive Web Design (RWD) \u548c Adaptive Web Design (AWD)"},"content":{"rendered":"

\"Responsive<\/p><\/blockquote>\n

\n
\n

\u5171\u540c\u9ede\uff1a<\/h3>\n

RWD\u548cAWD\u7684\u51fa\u73fe\u90fd\u662f\u7531\u65bc\u79fb\u52d5\u4e0a\u7db2\u8a2d\u5099\u65e5\u76ca\u666e\u53ca\uff0c\u91dd\u5c0d\u4e0d\u540c\u8a2d\u5099(\u5c24\u5176\u8003\u616e\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8)\u53ca\u5176\u4f7f\u7528\u689d\u4ef6(\u901a\u5e38\u6709\u6bd4\u8f03\u4f4e\u7684\u983b\u5bec\uff0c\u6d41\u91cf\u548c\u6027\u80fd\u7b49) \u5c0d\u7db2\u9801\u4f5c\u51fa\u512a\u5316\uff0c\u4ee5\u5e36\u4f86\u66f4\u597d\u7684\u7528\u6236\u9ad4\u9a57\u3002<\/p>\n

RWD\uff1a<\/h3>\n
\n

\u8d77\u6e90\uff1a<\/h4>\n

Ethan Marcotte \u5728\u4ed6\u7684 A List Apart \u7684\u6587\u7ae0\u4e2d\u767c\u660e\u4e86\u8853\u8a9e Responsive Web Design (RWD)\u3002<\/p>\n

\u6982\u5ff5\uff1a<\/h4>\n

Wikipedia\u7684\u5b9a\u7fa9\uff1a\u300c\u81ea\u9069\u61c9\u7db2\u9801\u8a2d\u8a08\uff08\u82f1\u8a9e\uff1aResponsive web design\uff0c\u901a\u5e38\u7e2e\u5beb\u70baRWD\uff09\u662f\u4e00\u7a2e\u7db2\u9801\u8a2d\u8a08\u7684\u6280\u8853\u505a\u6cd5\uff0c\u8a72\u8a2d\u8a08\u53ef\u4f7f\u7db2\u7ad9\u5728\u591a\u7a2e\u700f\u89bd\u88dd\u7f6e\uff08\u5f9e\u684c\u9762\u96fb\u8166\u986f\u793a\u5668\u5230\u884c\u52d5\u96fb\u8a71\u6216\u5176\u4ed6\u884c\u52d5\u7522\u54c1\u88dd\u7f6e\uff09\u4e0a\u95b1\u8b80\u548c\u5c0e\u822a\uff0c\u540c\u6642\u6e1b\u5c11\u7e2e\u653e\u3001\u5e73\u79fb\u548c\u6372\u52d5\u3002\u300d
\n\u5177\u9ad4\u4f86\u8aaaRWD\u662f\u5728\u5ba2\u6236\u7aef\u5075\u6e2c\u5c4f\u5e55\u5c3a\u5bf8\u548c\u5c3a\u5bf8\u7684\u6539\u8b8a(\u6bd4\u5982\u624b\u6a5f\u5f9e\u5782\u76f4\u986f\u793a\u8b8a\u6210\u6a6b\u5411)\u4f86\u6539\u8b8a\u9801\u9762\u4f48\u5c40\u548c\u5916\u89c0\uff0c\u914d\u5408\u5982\u6d41\u9ad4\u4f48\u5c40\u548c\u53ef\u4ee5\u81ea\u9069\u61c9\u7684\u5716\u7247\/\u8996\u983b\u7b49\u6280\u8853\uff0c\u4f7f\u9801\u9762\u53ea\u9700\u540c\u4e00\u5957\u7a0b\u5f0f\u78bc\uff0c\u5c31\u80fd\u5920\u9069\u61c9\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u7684\u6280\u8853\u3002<\/p>\n

\u7279\u6027\uff1a<\/h4>\n
    \n
  1. \u9078\u64c7\u6027\u52a0\u8f09CSS\u548c\u6d41\u9ad4\u4f48\u5c40
    \n\u6d41\u9ad4\u4f48\u5c40\u662f\u591a\u5e74\u524d\u5df2\u7d93\u6d41\u884c\u7684\u6280\u8853\uff0c\u6307\u9801\u9762\u4f48\u5c40\u6703\u96a8\u8457\u700f\u89bd\u5668\u5c3a\u5bf8\u6539\u8b8a\u800c\u8b8a\u5316\uff0c\u4f8b\u5982\u5169\u6b04\u5f48\u6027\u4f48\u5c40\uff0c\u4e00\u908a\u662f\u56fa\u5b9a\u5bec\u5ea6\u7684\u908a\u6b04\uff0c\u53e6\u4e00\u908a\u662f\u5f48\u6027\u5bec\u5ea6\uff0c\u96a8\u8457\u700f\u89bd\u5668\u5c3a\u5bf8\u6539\u8b8a\u800c\u586b\u5145\u7a7a\u9593\u3002
    \nCSS3\u7684\u65b0\u529f\u80fdMedia Queries\uff0c\u539f\u7406\u662f\u5236\u5b9a\u4e0d\u540c\u65b7\u9ede(Break point)\uff0c\u7576\u5c4f\u5e55\u5c3a\u5bf8\u7b26\u5408\u67d02\u500b\u65b7\u9ede\u4e4b\u9593\u7684\u7bc4\u570d\uff0c\u5c31\u4f7f\u7528\u7279\u5b9a\u7684CSS\u4f86\u6539\u8b8a\u4f48\u5c40\uff0c\u901a\u5e38\u9084\u6703\u914d\u5408\u6d41\u9ad4\u4f48\u5c40\u4f7f\u7528\uff0c\u4f8b\u5982\u4f7f\u7528\u767e\u5206\u6bd4\u5b9a\u7fa9\u5143\u7d20\u5bec\u5ea6\u800c\u4e0d\u662f\u56fa\u5b9a\u5bec\u5ea6\uff0c\u63d0\u9ad8\u9801\u9762\u81ea\u9069\u61c9\u6027\u3002<\/li>\n
  2. \u81ea\u9069\u61c9\u7684\u5716\u50cf\u548c\u8996\u983b
    \n\u4ee5\u76f8\u5c0d\u55ae\u4f4d(%\uff0cem)\u8abf\u6574\u591a\u5a92\u9ad4\u5927\u5c0f\u3002<\/li>\n
  3. \u76f8\u5c0d\u5927\u5c0f\u5b57\u9ad4
    \n\u540c2\uff0c\u5c0d\u5b57\u9ad4\u4e0d\u4f7f\u7528\u7d55\u5c0d\u55ae\u4f4d(px\uff0cpt)\uff0c\u800c\u4f7f\u7528\u76f8\u5c0d\u55ae\u4f4d(em)\u3002<\/li>\n
  4. \u9801\u9762\u7e2e\u653e\u63a7\u5236
    \n\u4f7f\u7528HTML\u7684<meta name=’viewport’>\u6a19\u7c64\uff0c\u63a7\u5236\u9801\u9762\u5728\u8a2d\u5099\u4e0a\u7684\u7e2e\u653e\u521d\u59cb\u503c\u548c\u88ab\u7528\u6236\u7e2e\u653e\u7684\u4e0a\u4e0b\u9650\u7b49\u3002<\/li>\n
  5. JavaScript
    \n\u9664\u4e86CSS3\u7684Media Queries\uff0c\u4e5f\u6703\u80fd\u4f7f\u7528JavaScript\u5075\u6e2c\u5c4f\u5e55\u5c3a\u5bf8\u8b8a\u5316\uff0c\u5c0d\u9801\u9762\u4f5c\u51fa\u6bd4CSS\u66f4\u5927\u7a0b\u5ea6\u7684\u8abf\u6574\u3002<\/li>\n
  6. \u517c\u5bb9\u6027
    \n\u6709\u79fb\u52d5\u512a\u5148(Mobile first) \u548c\u6f38\u9032\u589e\u5f37(Progressive enhancement) 2\u500b\u6982\u5ff5\uff1a \u79fb\u52d5\u512a\u5148\u662f\u7531\u65bc\u8f03\u57fa\u790e\u6216\u8f03\u820a\u7684\u700f\u89bd\u5668\u4e0d\u80fd\u4f7f\u7528Media Queries\u6216JavaScript\uff0c\u56e0\u6b64\u6bd4\u8f03\u597d\u7684\u505a\u6cd5\u662f\u5148\u505a\u51fa\u901a\u7528\u7684\u56fa\u5b9a\u4f48\u5c40\u6846\u67b6\uff0c\u4e4b\u5f8c\u518d\u70ba\u529f\u80fd\u8f03\u5f37\u7684\u700f\u89bd\u5668\u63d0\u4f9b\u589e\u5f37\u529f\u80fd\u3002
    \n\u6f38\u9032\u589e\u5f37\u662f\u4f7f\u7528\u67d0\u4e9b\u5075\u6e2c\u6280\u8853\u63a8\u65b7\u700f\u89bd\u5668\u662f\u5426\u652f\u63f4\u500b\u5225\u529f\u80fd\uff0c\u4f8b\u5982JavaScript\u7684\u5eabModernizr\u3002\u4e5f\u6703\u4f7f\u7528Polyfills\u4f86\u4ee5\u975e\u5b98\u65b9\u7684\u6280\u8853\u70ba\u7279\u5b9a\u700f\u89bd\u5668\u88dc\u5145\u5176\u6240\u7f3a\u5931\u7684\u529f\u80fd\u3002<\/li>\n<\/ol>\n

    \u5be6\u4f8b\uff1a<\/h4>\n

    Moran Prizes<\/a><\/section>\n

    AWD\uff1a<\/h3>\n
    \n

    \u6982\u5ff5\uff1a<\/h4>\n

    “Adaptive Web Design”\u4e00\u8a5e\u6700\u521d\u7531Aaron Gustafson\u8457\u4f5c\u7684\u540c\u540d\u66f8\u7c4d\u63d0\u51fa\uff0c\u4ed6\u8a8d\u70ba\u9664\u4e86\u4f7f\u7528RWD\u6280\u8853\u65bc\u5ba2\u6236\u7aef\u63a7\u5236\u9801\u9762\u4f48\u5c40\u5916\uff0c\u4e5f\u61c9\u8a72\u91dd\u5c0d\u4e0d\u540c\u5ba2\u6236\u8a2d\u5099\u4f86\u589e\u6e1b\u5167\u5bb9\u548c\u5916\u89c0\u4ee5\u63d0\u9ad8\u9069\u61c9\u6027\u548c\u7528\u6236\u9ad4\u9a57\u3002AWD\u53ef\u4ee5\u5728\u4f3a\u670d\u7aef\u6216\u5ba2\u6236\u7aef\u4ee5\u8a2d\u5099\u8fa8\u8b58\u6280\u8853\u4f86\u70ba\u4e0d\u540c\u8a2d\u5099\u63d0\u4f9b\u4e0d\u540c\u5167\u5bb9\uff0c\u751a\u81f3\u662f\u53e6\u4e00\u5957\u7a0b\u5f0f\u78bc\uff0c\u9801\u9762\u6216\u7ad9\u9ede\u3002<\/p>\n

    \u7279\u6027\uff1a<\/h4>\n
      \n
    1. \u4f3a\u670d\u7aef\u8fa8\u8b58\u5ba2\u6236\u8a2d\u5099\u4f7f\u7528\u4f3a\u670d\u7aef\u7684\u8fa8\u8b58\uff0c\u4f86\u6c7a\u5b9a\u57f7\u884c\u4ec0\u9ebc\u7a0b\u5f0f\uff0c\u4f8b\u5982\u6c7a\u5b9a\u662f\u5426\u8f49\u5740\u5230\u884c\u52d5\u8a2d\u5099\u7684\u7a0b\u5f0f\u78bc\uff0c\u9019\u662f\u8a31\u591a\u7db2\u7ad9\u7d93\u5e38\u4f7f\u7528\u7684\u65b9\u5f0f\u3002<\/li>\n
    2. \u5ba2\u6236\u7aef\u8fa8\u8b58\u5ba2\u6236\u8a2d\u5099Google\u6240\u63a8\u85a6\u7684\u65b9\u5f0fJavaScript-adaptive\u6982\u5ff5\uff0c\u4f7f\u7528\u76f8\u540c\u7684HTML\/CSS\/Javascript\u5728\u5404\u7a2e\u4e0d\u540c\u7684\u8f09\u5177\u4e0a\uff0c\u4e0d\u540c\u7684\u8f09\u5177\u6703\u6709\u4e0d\u540c\u7684\u57f7\u884c\u7d50\u679c\u3002<\/li>\n
    3. \u4e0d\u540c\u7248\u672c\u7684\u8cc7\u6e90\u7db2\u7ad9\u958b\u767c\u8005\u6703\u5148\u6e96\u5099\u597d\u4e0d\u540c\u7248\u672c\u7684\u5167\u5bb9\u548c\u8cc7\u6e90\uff0c\u6839\u64da\u8fa8\u8b58\u7684\u7d50\u679c\u4f86\u63d0\u4f9b\u5c0d\u61c9\u7684\u7248\u672c\u3002\u9084\u80fd\u5f9e\u4e0d\u540c\u4f3a\u670d\u5668\u7684\u904b\u884c\u901f\u5ea6\uff0c\u6216\u8005\u57df\u540d\u7684\u7db2\u7d61\u901f\u5ea6\u7b49\u5c64\u9762\u5be6\u73fe\u66f4\u5927\u7a0b\u5ea6\u7684\u512a\u5316\u3002<\/li>\n<\/ol>\n

      \u5be6\u4f8b\uff1a<\/h4>\n

      John Hardy<\/a><\/section>\n

      \u6bd4\u8f03\uff1a<\/h3>\n

      \u7c21\u55ae\u4f86\u8aaa\uff0cRWD\u4e3b\u8981\u662f\u4f9d\u9760\u9ad8\u5f48\u6027\u7684\u4f48\u5c40\u7b56\u7565\uff0c\u4f7f\u540c\u4e00\u500b\u9801\u9762\u80fd\u9069\u61c9\u4e0d\u540c\u8a2d\u5099\u7684\u904b\u884c\u74b0\u5883\u3002AWD\u5247\u662f\u901a\u904e\u8fa8\u8b58\u5ba2\u6236\u8a2d\u5099\uff0c\u63d0\u4f9b\u91dd\u5c0d\u8a72\u8a2d\u5099\u7684\u4e0d\u540c\u7248\u672c\u7684\u9801\u9762\u5167\u5bb9\u548c\u8cc7\u6e90\u3002
      \nRWD\u548cAWD\u6709\u5f88\u591a\u91cd\u758a\u7684\u7279\u6027\uff0c\u751a\u81f3\u6709\u4eba\u8aaaRWD\u662fAWD\u7684\u4e00\u500b\u5b50\u96c6\u3002\u5169\u8005\u6c92\u6709\u660e\u986f\u7684\u512a\u7f3a\u9ede\uff0c\u652f\u6301RWD\u7684\u8aaa\u6cd5\u8a8d\u70ba\u4e0d\u61c9\u8a72\u56e0\u70ba\u7528\u6236\u4f7f\u7528\u79fb\u52d5\u8a2d\u5099\u5c31\u522a\u6e1b\u5167\u5bb9\u6216\u9650\u5236\u529f\u80fd\uff0c\u61c9\u8a72\u516c\u5e73\u5c0d\u5f85\u3002\u800c\u652f\u6301AWD\u7684\u8aaa\u6cd5\u5247\u8a8d\u70ba\u79fb\u52d5\u8a2d\u5099\u6709\u4e0d\u540c\u65bc\u684c\u9762\u8a2d\u5099\u7684\u4f7f\u7528\u60c5\u6cc1\uff0c\u5305\u62ec\u7db2\u901f\uff0c\u6d41\u91cf\uff0c\u6027\u80fd\u7b49\uff0c\u61c9\u8a72\u91dd\u5c0d\u5176\u63d0\u4f9b\u512a\u5316\u904e\u7684\u9801\u9762\uff0c\u4e26\u6279\u8a55RWD\u5728\u79fb\u52d5\u8a2d\u5099\u4e0a\u52a0\u8f09\u9ad4\u7a4d\u5de8\u5927\u7684\u5716\u50cf\uff0c\u904b\u884c\u6027\u80fd\u6d88\u8017\u5927\u7684\u8173\u672c\u7b49\u3002\u7136\u800c\u9019\u4e9b\u554f\u984c\u4e5f\u6709\u89e3\u6c7a\u65b9\u6cd5\uff0c\u5c0d\u65bc\u5716\u50cf\uff0c\u53ef\u4ee5\u5229\u7528CSS\u7684\u5c64\u758a\u7279\u6027\u548cMedia Queries\u6280\u8853\uff0c\u5148\u52a0\u8f09\u9ad4\u7a4d\u5c0f\u7248\u672c\u7684\u5716\u50cf\uff0c\u7576\u9801\u9762\u5c3a\u5bf8\u7b26\u5408\u8f03\u5927\u7684\u65b7\u9ede\u6642\u624d\u52a0\u8f09\u66f4\u5927\u5c3a\u5bf8\u7684\u7248\u672c\u3002\u800c\u6027\u80fd\u65b9\u9762\u4e5f\u80fd\u901a\u904eJavaScript\u5c0d\u9801\u9762\u5143\u7d20\u505a\u66f4\u591a\u8abf\u6574\u4f86\u512a\u5316\uff0c\u4f8b\u5982\u65bc\u79fb\u52d5\u8a2d\u5099\u4e0a(\u8fa8\u8b58\u5ba2\u6236\u8a2d\u5099\u6216\u5075\u6e2c\u5c4f\u5e55\u5c3a\u5bf8)\u4e0d\u904b\u884c\u5c0d\u6027\u80fd\u8981\u6c42\u9ad8\u7684\u8173\u672c\u7b49\u3002\u751a\u81f3\u4e5f\u51fa\u73feRESS(Responsive Web Design with Server Side Components\uff0c\u900f\u904e\u4f3a\u670d\u5668\u7aef\u5143\u4ef6\u7684\u97ff\u61c9\u5f0f\u7db2\u9801\u8a2d\u8a08) \u7684\u6982\u5ff5\uff0c\u5c31\u662fRWD\u548cAWD\u540c\u6642\u914d\u5408\u4f7f\u7528\uff0c\u4f8b\u5982\u4f48\u5c40\u5177\u6709RWD\u7684\u826f\u597d\u5f48\u6027\uff0c\u4e5f\u6703\u7528\u8a2d\u5099\u8fa8\u8b58\u6280\u8853\uff0c\u65bc\u67d0\u500b\u65b7\u9ede\u4f7f\u7528AJAX\u52d5\u614b\u52a0\u8f09\u5c0d\u61c9\u8a72\u8a2d\u5099\u7684\u8cc7\u6e90\u3002<\/p>\n

      \u7e3d\u7d50\uff1a<\/h3>\n

      RWD\u548cAWD\u5169\u8005\u4e26\u6c92\u6709\u660e\u78ba\u7684\u5be6\u73fe\u6a19\u6e96\u548c\u512a\u7f3a\u9ede\uff0c\u90fd\u662f\u4ee5\u63d0\u9ad8\u7528\u6236\u9ad4\u9a57\u70ba\u76ee\u6a19\uff0c\u958b\u767c\u8005\u61c9\u8a72\u6839\u64da\u4e0d\u540c\u60c5\u6cc1\uff0c\u9078\u64c7\u8a72\u4f7f\u7528\u7684\u6280\u8853\uff0c\u5f48\u6027\u8655\u7406\u3002<\/p><\/blockquote>\n

      Reference from: http:\/\/www.xenyomedia.com\/blog\/134\/responsive-web-design-rwd-%E5%92%8C-adaptive-web-design-awd<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"

      \u5171\u540c\u9ede\uff1a RWD\u548cAWD\u7684\u51fa\u73fe\u90fd\u662f\u7531\u65bc\u79fb\u52d5\u4e0a\u7db2\u8a2d\u5099\u65e5\u76ca\u666e\u53ca\uff0c\u91dd\u5c0d\u4e0d\u540c\u8a2d\u5099(\u5c24\u5176\u8003\u616e\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8)\u53ca\u5176\u4f7f\u7528\u689d\u4ef6( … <\/p>\n

      \u95b1\u8b80\u5168\u6587\u3008Responsive Web Design (RWD) \u548c Adaptive Web Design (AWD)\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[34,106],"_links":{"self":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/463"}],"collection":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=463"}],"version-history":[{"count":0,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/463\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}