{"id":1643,"date":"2019-10-22T09:35:46","date_gmt":"2019-10-22T01:35:46","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1643"},"modified":"2021-10-23T21:16:06","modified_gmt":"2021-10-23T13:16:06","slug":"html5-mobile-web","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/10\/22\/html5-mobile-web\/","title":{"rendered":"Html5 Mobile Web \u7b26\u5408\u88dd\u7f6e\u5c3a\u5bf8\u8a2d\u5b9a"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Viewport<\/strong><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\">\n&lt;meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0\" \/><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Css<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">*Max Width \u5bec\u5c0f\u65bc600px<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 600px)\n{\n    .css{...}\n    .css{...}\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" media=\"screen and (max-width: 600px)\" href=\"600.css\" \/><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">*Min Width \u5bec\u5927\u65bc900px<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (min-width: 900px)\n{\n    .css{...}\n    .css{...}\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 900px)\" href=\"900.css\" \/><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">*Device Width \u53ef\u8996\u7bc4\u570d\u6700\u5927\u70ba480px<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-device-width: 480px)\n{\n    .css{...}\n    .css{...}\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" media=\"screen and (max-device-width: 480px)\" href=\"480.css\" \/><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">*\u5bec \u5927\u65bc400px \u5c0f\u65bc800px \u4e4b\u9593<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (min-width: 400px) and (max-width: 800px)\n{\n    .css{...}\n    .css{...}\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 400px) and (max-width: 800px)\" href=\"style.css\" \/><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">css<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u81ea\u8a021*\/\n@media screen and (min-width: 1200px) {  \n    \/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6 >= 1200px\u3002  \n}  \n    \n@media screen and (min-width: 768px) and (max-width: 979px) {  \n    \/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6\u4ecb\u65bc 768px ~ 979px\u3002     \n}  \n    \n@media screen and (max-width: 767px) {  \n    \/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u8996\u7a97\u5bec\u5ea6 &lt;= 768px\u3002     \n}  \n    \n@media screen and (max-device-width: 480px) {  \n    \/\/ \u5982\u679c\u4f7f\u7528\u8005\u4e4b\u88dd\u7f6e\u5bec\u5ea6 &lt;= 480px\u3002  \n}  \n\n\/*\u81ea\u8a022*\/\n@media screen and (min-width: 1280px) {  \n    body{\n      font-size:16px;\n    }\n} \n \n@media all and (min-width: 768px) and (max-width: 1280px) {\n    body{\n      font-size:16px;\n    }\n}\n@media all and (min-width: 480px) and (max-width: 768px) {\n    body{\n      font-size:22px;\n    }\n}\n@media all and (min-width: 320px) and (max-width: 480px) {\n    body{\n      font-size:28px;\n    }\n}\n@media all and (max-width: 320px) {\n    body{\n      font-size:32px;\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">link<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u81ea\u8a021*\/\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"all.css\" media=\"screen\">  \n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"a.css\" media=\"screen and (min-width: 1200px)\">  \n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"b.css\" media=\"screen and (min-width: 768px) and (max-width: 979px)\">  \n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"c.css\" media=\"screen and (max-width: 767px)\">  \n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"d.css\" media=\"screen and (max-device-width: 480px)\"> \n\n\/*\u81ea\u8a022*\/\n&lt;link rel=\"stylesheet\" media=\"all and (max-device-width: 480px)\" href=\"iphone.css\"> \n&lt;link rel=\"stylesheet\" media=\"all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)\" href=\"ipad-portrait.css\"> \/*\u76f4*\/\n&lt;link rel=\"stylesheet\" media=\"all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)\" href=\"ipad-landscape.css\"> \/*\u6a6b*\/\n&lt;link rel=\"stylesheet\" media=\"all and (min-device-width: 1025px)\" href=\"ipad-landscape.css\"> \n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rwd\u6ce8\u610f<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">\u907f\u514d\u7834\u5716<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div{\n     -webkit-box-sizing: border-box; \/* Safari\/Chrome, other WebKit *\/\n     -moz-box-sizing: border-box;    \/* Firefox, other Gecko *\/\n     box-sizing: border-box;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u5716\u7247\u7b49\u6bd4\u7e2e\u653e<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u56fa\u5b9a\u5bec\u5ea6\u7b49\u6bd4\u4f8b\u7e2e\u653e*\/\nimg {\n    height: auto;\n    max-width: 100%;\n}<\/pre>\n ","protected":false},"excerpt":{"rendered":"<p>Viewport Css *Max Width \u5bec\u5c0f\u65bc600px *Min Width \u5bec\u5927\u65bc900px *D&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,12,4],"tags":[],"class_list":["post-1643","post","type-post","status-publish","format-standard","hentry","category-html","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1643"}],"version-history":[{"count":12,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1643\/revisions"}],"predecessor-version":[{"id":1665,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1643\/revisions\/1665"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1643"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}