{"id":2863,"date":"2022-03-07T10:42:11","date_gmt":"2022-03-07T02:42:11","guid":{"rendered":"http:\/\/blog.odjbinail.cn\/?p=2863"},"modified":"2025-11-03T10:18:57","modified_gmt":"2025-11-03T02:18:57","slug":"17-%e7%a7%bb%e5%8a%a8%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2863","title":{"rendered":"\u79fb\u52a8\u57fa\u7840"},"content":{"rendered":"<h1>1.\u79fb\u52a8 Web \u5f00\u53d1\u5165\u95e8<\/h1>\n<p>\u524d\u7aef\u5f00\u53d1\u5206\u7c7b<\/p>\n<ul>\n<li>PC \u7aef\u5f00\u53d1<\/li>\n<li>\u79fb\u52a8\u7aef\u5f00\u53d1\n<ul>\n<li>\u79fb\u52a8 Web \u5f00\u53d1<\/li>\n<li>\u6df7\u5408\u5f0f\u5f00\u53d1(Hybrid App)<\/li>\n<li>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\/\u516c\u4f17\u53f7\u5f00\u53d1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u7269\u7406\u50cf\u7d20<\/h2>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/202202161433089.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/202202161433089.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>CSS \u50cf\u7d20<\/h2>\n<ul>\n<li>\u903b\u8f91\u50cf\u7d20\/\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20<\/li>\n<li>\u8bbe\u5907\u50cf\u7d20\u6bd4(dpr: device pixel ratio) dpr=\u8bbe\u5907\u50cf\u7d20\/CSS \u50cf\u7d20(\u7f29\u653e\u6bd4\u662f 1 \u7684\u60c5\u51b5\u4e0b) dpr=2 : \u8868\u793a 1 \u4e2a css \u50cf\u7d20\u7528 2x2 \u4e2a\u8bbe\u5907\u50cf\u7d20\u6765\u7ed8\u5236<\/li>\n<li>\u7f29\u653e \u7f29\u653e\u6539\u53d8\u7684\u662f CSS \u50cf\u7d20\u7684\u5927\u5c0f \u653e\u5927 : 1CSS \u50cf\u7d20=2x2 \u4e2a\u7269\u7406\u50cf\u7d20 \u7f29\u5c0f : 2x2 \u4e2a CSS \u50cf\u7d20=1 \u4e2a\u7269\u7406\u50cf\u7d20<\/li>\n<li>PPI \u6bcf\u82f1\u5bf8\u7684\u7269\u7406\u50cf\u7d20\u70b9 ppi : pixels per inch dpi : dots per inch<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021614515983.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021614515983.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u89c6\u53e3-viewport<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n \/\/ \u89c6\u53e3\u5bbd\u5ea6\n    console.log(window.innerWidth);\n    console.log(document.documentElement.clientWidth);\n    console.log(document.documentElement.getBoundingClientRect().width);\n\/\/\u8003\u8651\u517c\u5bb9\u6027\n    var viewWidth=document.documentElement.clientWidth||window.innerWidth;\n   \/\/ console.log(screen.width);\n    \/\/ dpr\n    console.log(window.devicePixelRatio);<\/code><\/pre>\n<h2>box-sizing<\/h2>\n<ul>\n<li>box-sizing : content-box [box \u7684\u5bbd\u9ad8\u662f\u5185\u5bb9\u7684\u5bbd\u9ad8] \u5411\u5916\u6269\u5f20<\/li>\n<li>box-sizing : border-box <a href=\"\u79fb\u52a8\u7aef\">\u4ece border \u5f00\u59cb\u7684\u5bbd\u9ad8<\/a> \u52a0\u4e86 padding border \u662f\u5411\u5185\u538b\u7f29<\/li>\n<\/ul>\n<h2>flex \u5e03\u5c40-\u5165\u95e8<\/h2>\n<ul>\n<li>\u4ec0\u4e48\u662f flex \u5bb9\u5668? \u91c7\u7528 flex \u5e03\u5c40\u7684\u5143\u7d20,\u79f0\u4e3a flex \u5bb9\u5668 .box{display:flex | inline-flex;}<\/li>\n<li>\u4ec0\u4e48\u662f flex \u9879\u76ee(flex item)? flex \u5bb9\u5668\u7684\u6240\u6709\u5b50\u5143\u7d20\u81ea\u52a8\u6210\u4e3a\u5bb9\u5668\u6210\u5458,\u79f0\u4e3a flex \u9879\u76ee<\/li>\n<li>\u9879\u76ee\u9ed8\u8ba4\u6cbf\u4e3b\u8f74\u6392\u5217 <img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021616221746.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021616221746.png\" alt=\"\" \/><\/li><\/noscript>\n<\/ul>\n<h2>\u79fb\u52a8 webapp \u5165\u95e8<\/h2>\n<ul>\n<li>display \u5c5e\u6027 display:flex | inline-flex; flex : \u5c06\u5bf9\u8c61\u4f5c\u4e3a\u5f39\u6027\u4f38\u7f29\u76d2\u663e\u793a[\u5177\u6709 block \u5143\u7d20][\u6709\u9ed8\u8ba4 100%\u5bbd\u5ea6,\u53f3\u8fb9\u5982\u679c\u65e0\u5219\u7559\u767d] inline-flex : \u5c06\u5bf9\u8c61\u4f5c\u4e3a\u5185\u8054\u5757\u7ea7\u5f39\u6027\u4f38\u7f29\u76d2\u663e\u793a,\u7531\u91cc\u9762\u5185\u5bb9\u6491\u5f00<\/li>\n<li>\n<p>flex-direction \u5c5e\u6027 \u51b3\u5b9a\u4e3b\u8f74\u65b9\u5411(\u5373\u9879\u76ee\u7684\u6392\u5217\u65b9\u5411) .box{ flex-direction : row | row-reverse | column | column-reverse; }<\/p>\n<ul>\n<li>row(\u9ed8\u8ba4\u503c) : \u4e3b\u8f74\u4e3a\u6c34\u5e73\u65b9\u5411,\u8d77\u70b9\u5728\u5de6\u7aef<\/li>\n<li>row-reverse : \u4e3b\u8f74\u4e3a\u6c34\u5e73\u65b9\u5411,\u8d77\u70b9\u5728\u53f3\u7aef<\/li>\n<li>column : \u4e3b\u8f74\u4e3a\u5782\u76f4\u65b9\u5411,\u8d77\u70b9\u5728\u4e0a\u6cbf<\/li>\n<li>column-reverse: \u4e3b\u8f74\u4e3a\u5782\u76f4\u65b9\u5411,\u8d77\u70b9\u5728\u4e0b\u6cbf<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>flex-wrap \u5c5e\u6027 \u9ed8\u8ba4\u60c5\u51b5\u4e0b,\u9879\u76ee\u90fd\u6392\u5728\u4e00\u6761\u7ebf(\u53c8\u79f0&quot;\u8f74\u7ebf&quot;)\u4e0a flex-wrap \u5c5e\u6027\u5b9a\u4e49,\u5982\u679c\u4e00\u6761\u8f74\u7ebf\u6392\u4e0d\u4e0b,\u5982\u4f55\u6362\u884c .box{ flex-wrap: nowrap | wrap | wrap-reverse; }<\/p>\n<ul>\n<li>nowrap(\u9ed8\u8ba4) : \u4e0d\u6362\u884c<\/li>\n<li>wrap : \u6362\u884c, \u7b2c\u4e00\u884c\u5728\u4e0a\u65b9<\/li>\n<li>wrap-reverse : \u6362\u884c,\u7b2c\u4e00\u884c\u5728\u4e0b\u65b9<\/li>\n<\/ul>\n<\/li>\n<li>flex-flow \u5c5e\u6027 \u662f flex-direction \u5c5e\u6027\u548c flex-wrap \u5c5e\u6027\u7684\u7b80\u5199\u5f62\u5f0f,\u9ed8\u8ba4\u503c\u4e3a row nowrap .box{ flex-flow : flex-direction | flex-wrap }<\/li>\n<li>\n<p>justify-content \u5c5e\u6027 \u5b9a\u4e49\u4e86\u9879\u76ee\u5728\u4e3b\u8f74\u4e0a\u7684\u5bf9\u9f50\u65b9\u5f0f .box{ justify-content: flex-start | flex-end | center | space-between | space-around; }<\/p>\n<ul>\n<li>flex-start(\u9ed8\u8ba4\u503c) : \u5de6\u5bf9\u9f50<\/li>\n<li>flex-end : \u53f3\u5bf9\u9f50<\/li>\n<li>center : \u5c45\u4e2d<\/li>\n<li>space-between : \u4e24\u7aef\u5bf9\u9f50,\u9879\u76ee\u4e4b\u95f4\u7684\u95f4\u9694\u90fd\u76f8\u7b49<\/li>\n<li>space-around : \u6bcf\u4e2a\u9879\u76ee\u4e24\u4fa7\u7684\u95f4\u9694\u76f8\u7b49,\u6240\u4ee5,\u9879\u76ee\u4e4b\u95f4\u7684\u95f4\u9694\u6bd4\u9879\u76ee\u4e0e\u8fb9\u6846\u7684\u95f4\u9694\u5927\u4e00\u500d <img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030621334448.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030621334448.png\" alt=\"\" \/><\/li><\/noscript>\n<\/ul>\n<\/li>\n<li>\n<p>align-items \u5c5e\u6027 [\u5782\u76f4\u5c45\u4e2d] align-items \u5c5e\u6027\u5b9a\u4e49\u9879\u76ee\u5728\u4ea4\u53c9\u8f74\u4e0a\u5982\u4f55\u5bf9\u9f50 .box{ align-items: flex-start | flex-end | center | baseline | stretch; }<\/p>\n<ul>\n<li>flex-start: \u4ea4\u53c9\u8f74\u7684\u8d77\u70b9\u5bf9\u9f50<\/li>\n<li>flex-end: \u4ea4\u53c9\u8f74\u7684\u7ec8\u70b9\u5bf9\u9f50<\/li>\n<li>center : \u4ea4\u53c9\u8f74\u7684\u4e2d\u70b9\u5bf9\u9f50<\/li>\n<li>baseline: \u9879\u76ee\u7684\u7b2c\u4e00\u884c\u6587\u5b57\u7684\u57fa\u7ebf[\u6570\u5b57\u4e0b\u5212\u7ebf]\u5bf9\u9f50<\/li>\n<li>stretch(\u9ed8\u8ba4\u503c) : \u5982\u679c\u9879\u76ee<strong>\u672a\u8bbe\u7f6e\u9ad8\u5ea6\u6216\u8bbe\u4e3a auto,<\/strong>\u5c06\u6cbe\u6ee1\u6574\u4e2a\u5bb9\u5668\u7684\u9ad8\u5ea6<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>align-content \u5c5e\u6027 \u5b9a\u4e49\u4e86\u591a\u6839\u8f74\u7ebf(\u591a\u884c)\u5728\u4ea4\u53c9\u8f74\u4e0a\u7684\u5bf9\u9f50\u65b9\u5f0f \u5982\u679c\u9879\u76ee\u53ea\u6709\u4e00\u6839\u8f74\u7ebf(\u4e00\u884c),\u8be5\u5c5e\u6027\u4e0d\u8d77\u4f5c\u7528 .box{ flex-wrap : wrap;\/\/\u6362\u884c align-content : flex-start | flex-end | enter | space-between | space-around | stretch;} }<\/p>\n<ul>\n<li>flex-start : \u6574\u4f53 \u4e0e\u4ea4\u53c9\u8f74\u7684\u8d77\u70b9\u5bf9\u9f50[\u5de6\u4e0a\u89d2]<\/li>\n<li>flex-end : \u4e0e\u4ea4\u53c9\u8f74\u7684\u7ec8\u70b9\u5bf9\u9f50[\u5de6\u4e0b\u89d2]<\/li>\n<li>center : \u4e0e\u4ea4\u53c9\u8f74\u7684\u4e2d\u70b9\u5bf9\u9f50<\/li>\n<li>space-between : \u4e0e\u4ea4\u53c9\u8f74\u4e24\u7aef\u5bf9\u9f50,\u8f74\u7ebf\u4e4b\u95f4\u7684\u95f4\u9694\u5e73\u5747\u5206\u5e03<\/li>\n<li>space-around: \u6bcf\u6839\u8f74\u7ebf\u4e24\u4fa7\u7684\u95f4\u9694\u90fd\u76f8\u7b49 \u6240\u4ee5,\u8f74\u7ebf\u4e4b\u95f4\u7684\u95f4\u9694\u6bd4\u8f74\u7ebf\u4e0e\u8fb9\u6846\u7684\u95f4\u9694\u5927\u4e00\u500d<\/li>\n<li>stretch(\u9ed8\u8ba4\u503c) : \u8f74\u7ebf\u5360\u6ee1\u6574\u4e2a\u4ea4\u53c9\u8f74[\u5982\u679c\u9879\u76ee<strong>\u672a\u8bbe\u7f6e\u9ad8\u5ea6\u6216\u8bbe\u4e3a auto,<\/strong>\u5c06\u6cbe\u6ee1\u6574\u4e2a\u5bb9\u5668\u7684\u9ad8\u5ea6]<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>flex \u5e03\u5c40-\u9879\u76ee\u7684\u5c5e\u6027<\/h2>\n<ul>\n<li>order \u5c5e\u6027 \u5b9a\u4e49\u9879\u76ee\u7684\u6392\u5217\u987a\u5e8f \u6570\u503c\u8d8a\u5c0f\u554a,\u6392\u5217\u8d8a\u9760\u524d,\u9ed8\u8ba4\u4e3a 0<\/li>\n<li>\n<p>flex-grow \u5c5e\u6027 \u5b9a\u4e49\u9879\u76ee\u7684\u653e\u5927\u6bd4\u4f8b,\u9ed8\u8ba4\u4e3a 0,\u5373\u5982\u679c\u5b58\u5728\u5269\u4f59\u7a7a\u95f4,\u4e5f\u4e0d\u653e\u5927<\/p>\n<ul>\n<li>\u5982\u679c\u6240\u6709\u9879\u76ee\u7684 flex-grow \u5c5e\u6027\u90fd\u4e3a 1,\u5219\u5b83\u4eec\u5c06\u7b49\u5206\u5269\u4f59\u7a7a\u95f4(\u5982\u679c\u6709\u7684\u8bdd)<\/li>\n<li>\u5982\u679c\u4e00\u4e2a\u9879\u76ee\u7684 flex-grow \u5c5e\u6027\u4e3a 2,\u5176\u4ed6\u9879\u76ee\u90fd\u4e3a 1,\u5219\u524d\u8005\u5360\u636e\u7684\u5269\u4f59\u7a7a\u95f4\u5c06\u6bd4\u5176\u4ed6\u9879\u591a\u4e00\u500d .item{ flex-grow: &lt;number \/\/\u9ed8\u8ba4\u4e3a 0 }<\/li>\n<li>\u5982\u679c\u6709\u7684\u9879\u76ee\u6709 flex-grow \u5c5e\u6027,\u6709\u7684\u9879\u76ee\u6709 width \u5c5e\u6027,\u6709 flex-grow \u5c5e\u6027\u7684\u9879\u76ee\u5c06\u7b49\u5206\u5269\u4f59\u7a7a\u95f4<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>flex-shrink \u5c5e\u6027 \u5b9a\u4e49\u4e86\u9879\u76ee\u7684\u7f29\u5c0f\u6bd4\u4f8b,\u9ed8\u8ba4\u4e3a 1,\u5373\u5982\u679c\u7a7a\u95f4\u4e0d\u8db3,\u8be5\u9879\u76ee\u5c06\u7f29\u5c0f<\/p>\n<ul>\n<li>\u5982\u679c\u6240\u6709\u9879\u76ee\u7684 flex-shrink \u5c5e\u6027\u90fd\u4e3a 1,\u5f53\u7a7a\u95f4\u4e0d\u8db3\u65f6,\u90fd\u5c06\u7b49\u6bd4\u4f8b\u7f29\u5c0f<\/li>\n<li>\u5982\u679c\u4e00\u4e2a\u9879\u76ee\u7684 flex-shrink \u5c5e\u6027\u4e3a 0,\u5176\u4ed6\u9879\u76ee\u90fd\u4e3a 1,\u5219\u7a7a\u95f4\u4e0d\u8db3\u65f6,\u524d\u8005\u4e0d\u7f29\u5c0f<\/li>\n<li>\u8d1f\u503c\u5bf9\u8be5\u5c5e\u6027\u65e0\u6548 .item{ flex-shrink: &lt;number; }<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>flex-basis \u5c5e\u6027 \u5b9a\u4e49\u4e86\u5728\u5206\u914d\u591a\u4f59\u7a7a\u95f4\u4e4b\u524d,\u9879\u76ee\u5360\u636e\u7684\u4e3b\u8f74\u7a7a\u95f4(main size),[\u9ed8\u8ba4\u4e3a auto]<\/p>\n<ul>\n<li>\u6d4f\u89c8\u5668\u6839\u636e\u8fd9\u4e2a\u5c5e\u6027,\u8ba1\u7b97\u4e3b\u8f74\u662f\u5426\u6709\u591a\u4f59\u7a7a\u95f4<\/li>\n<li>\u5b83\u7684\u9ed8\u8ba4\u503c\u4e3a auto,\u5373\u9879\u76ee\u7684\u672c\u6765\u5927\u5c0f<\/li>\n<li>flex-basis \u4f18\u5148\u7ea7\u6bd4 width \u9ad8 .item{ flex-basis: &lt;length ; }<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>flex \u5c5e\u6027 \u662f flex-grow, flex-shrink \u548c flex-basis \u7684\u7b80\u5199,\u9ed8\u8ba4\u503c\u4e3a 0 1 auto<\/p>\n<ul>\n<li>\u540e\u4e24\u4e2a\u5c5e\u6027\u53ef\u9009<\/li>\n<li>\u8be5\u5c5e\u6027\u6709\u4e24\u4e2a\u5feb\u6377\u503c : auto(1 1 auto) \u548c none(0 0 auto)<\/li>\n<li>.item{ flex: none | [ &lt;flex-grow &lt;flex-shrink ? || &lt;flex-basis ]}<\/li>\n<li>flex : 1; \u662f flex : 1 1 0%; \u7684\u7f29\u5199<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>align-self \u5c5e\u6027 \u5141\u8bb8\u5355\u4e2a\u9879\u76ee\u6709\u4e0e\u5176\u4ed6\u9879\u76ee\u4e0d\u4e00\u6837\u7684\u5bf9\u9f50\u65b9\u5f0f,\u53ef\u8986\u76d6 align-items \u5c5e\u6027<\/p>\n<ul>\n<li>\u9ed8\u8ba4\u503c\u4e3a auto \u8868\u793a\u7ee7\u627f\u7236\u5143\u7d20\u7684 align-items \u5c5e\u6027,\u5982\u679c\u6ca1\u6709\u7236\u5143\u7d20,\u5219\u7b49\u540c\u4e8e stretch .item{ align-self : auto | flex-start | flex-end | center | baseline | stretch; }<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>flex \u5e03\u5c40-\u5b9e\u4f8b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot;\n    content=&quot;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&quot;&gt;\n  &lt;title&gt;3.6 flex \u5e03\u5c40--\u5b9e\u4f8b&lt;\/title&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/iconfont.css&quot;&gt;\n  &lt;style&gt;\n    * {\n      box-sizing: border-box;\n      padding: 0;\n      margin: 0;\n    }\n    body {\n      background-color: #e2e2e2;\n      color: #595B66;\n    }\n    a {\n      font-size: 12px;\n      color: #686868;\n      text-decoration: none;\n    }\n    li {\n      list-style: none;\n    }\n    html {\n      \/* html \u7684\u7236\u5bb9\u5668\uff0c\u53ef\u4ee5\u8ba4\u4e3a\u662f viewport *\/\n      height: 100%;\n    }\n    body {\n      display: flex;\n      flex-direction: column;\n      \/* vh : viewport \u7684\u9ad8 vw \u5bbd 1vh:\u53ef\u89c6\u9ad8\u5ea6\u7684 1%, 100vh:100%*\/\n      \/* min-height: 100vh;\u517c\u5bb9\u6027\u4e0d\u597d *\/\n      \/* \u76f8\u5bf9\u4e8e html \u7684 100% *\/\n      min-height: 100%\n    }\n    .header {\n      width: 100%;\n      height: 50px;\n      background-color: rgba(222, 24, 27, 0.9);\n      color: #fff;\n      \/* \u6587\u5b57\u6c34\u5e73\u5c45\u4e2d *\/\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .main {\n      flex: 1;\n      color: #fff;\n      display: flex;\n    }\n    .main-content {\n      \/* \u5c06 main \u8bbe\u7f6e\u4e3a flex \u5bb9\u5668,content \u74dc\u5206\u5269\u4f59\u7a7a\u95f4 *\/\n      flex: 1;\n      background-color: green;\n      \/* \u8bbe\u7f6e\u4e3a flex \u5bb9\u5668,\u91cc\u9762\u7684\u6587\u5b57\u5219\u53d8\u4e3a flex \u9879\u76ee *\/\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .main-sidebar {\n      \/* \u7c89\u8272 sidebar \u5728\u5de6\u8fb9 *\/\n      order: -1;\n      width: 150px;\n      background-color: pink;\n      \/* \u8bbe\u7f6e\u4e3a flex \u5bb9\u5668,\u91cc\u9762\u7684\u6587\u5b57\u5219\u53d8\u4e3a flex \u9879\u76ee *\/\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .tabbar-container {\n      width: 100%;\n      height: 50px;\n      background-color: #fff;\n      \/* \u4e0d\u7ba1\u5185\u5bb9\u591a\u5c11,footer \u4e00\u76f4\u5728\u5e95\u90e8\u663e\u793a [\u5c06 body \u8bbe\u7f6e\u4e3a flex \u5bb9\u5668,header,main,footer \u540c\u65f6\u4e3a flex \u9879\u76ee]*\/\n    }\n    .tabbar{\n      display: flex;\n      \/* footer \u6491\u6ee1\u5e95\u90e8 *\/\n      height: 100%;\n    }\n    .tabbar-item{\n      flex: 1;\n      \/* background-color: yellow; *\/\n    }\n    .tabbar-link{\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n    .tabbar-link .iconfont{\n      font-size: 24px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;header class=&quot;header&quot;&gt;header&lt;\/header&gt;\n  &lt;div class=&quot;main&quot;&gt;\n    &lt;div class=&quot;main-content&quot;&gt;content&lt;\/div&gt;\n    &lt;div class=&quot;main-sidebar&quot;&gt;sidebar&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;footer class=&quot;tabbar-container&quot;&gt;\n    &lt;ul class=&quot;tabbar&quot;&gt;\n      &lt;li class=&quot;tabbar-item tabbar-item-active&quot;&gt;\n        &lt;a href=&quot;###&quot; class=&quot;tabbar-link&quot;&gt;\n          &lt;i class=&quot;iconfont icon-home&quot;&gt;&lt;\/i&gt;\n          &lt;span&gt;\u9996\u9875&lt;\/span&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;tabbar-item&quot;&gt;\n        &lt;a href=&quot;###&quot; class=&quot;tabbar-link&quot;&gt;\n          &lt;i class=&quot;iconfont icon-category&quot;&gt;&lt;\/i&gt;\n          &lt;span&gt;\u5206\u7c7b\u9875&lt;\/span&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;tabbar-item&quot;&gt;\n        &lt;a href=&quot;###&quot; class=&quot;tabbar-link&quot;&gt;\n          &lt;i class=&quot;iconfont icon-cart&quot;&gt;&lt;\/i&gt;\n          &lt;span&gt;\u8d2d\u7269\u8f66&lt;\/span&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;tabbar-item&quot;&gt;\n        &lt;a href=&quot;###&quot; class=&quot;tabbar-link&quot;&gt;\n          &lt;i class=&quot;iconfont icon-personal&quot;&gt;&lt;\/i&gt;\n          &lt;span&gt;\u4e2a\u4eba\u4e2d\u5fc3&lt;\/span&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030623171850.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030623171850.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u5a92\u4f53\u67e5\u8be2-\u57fa\u7840<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/* 1. \u4ec0\u4e48\u662f\u5a92\u4f53\u67e5\u8be2 *\/\n    @media screen and (min-width:900px) {\n      body {\n        background-color: pink;\n      }\n    }\n    \/* 2.\u4e3a\u4ec0\u4e48\u9700\u8981\u5a92\u4f53\u67e5\u8be2\n    \u4e00\u5957\u6837\u5f0f\u4e0d\u53ef\u80fd\u9002\u5e94\u5404\u79cd\u5927\u5c0f\u7684\u5c4f\u5e55\n    \u9488\u5bf9\u4e0d\u540c\u7684\u5c4f\u5e55\u5927\u5c0f\u5199\u6837\u5f0f,\u8ba9\u6211\u4eec\u7684\u9875\u9762\u5728\u4e0d\u540c\u5927\u5c0f\u7684\u5c4f\u5e55\u4e0a\u90fd\u80fd\u6b63\u5e38\u663e\u793a *\/\n    \/* 3.\u5a92\u4f53\u7c7b\u578b *\/\n    \/* all(default)\n    screen \/ print[ctrl+p] \/speech(\u5c4f\u5e55\u9605\u8bfb\u5668) *\/\n    @media (min-width:900px) {}\n    \/* 4.\u5a92\u4f53\u67e5\u8be2\u4e2d\u903b\u8f91[\u4e0e:(and),\u6216(,),\u975e(not)] *\/\n    \/* \u6216 *\/\n    @media screen and (min-width:1024px),\n    (max-width:900px) {}\n    \/* \u975e *\/\n    @media not screen and (min-width:900px)and (max-width:1024px) {}\n    @media not screen and (min-width:1024px),\n    (max-width:900px) {}\n    \/* 5.\u5a92\u4f53\u7279\u5f81\u8868\u8fbe\u5f0f *\/\n    \/* width\/max-width\/min-width\n      -webkit-device-pixel-ratio\/-webkit-max-device-pixel-ratio\/-webkit-min-pixel-ratio\n      orientation\n          landscape[\u6a2a\u5c4f]\/portrait\n    \u540e\u9762\u7684\u4e0d\u7528\n      height\n      device-width\/device-height\n      screen.width\/screen.height\n      aspect-ratio \u89c6\u53e3\u7684\u5bbd\u9ad8\u6bd4 *\/\n    \/* @media screen and (min-width: 900px) { *\/\n    @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {}<\/code><\/pre>\n<h2>\u5a92\u4f53\u67e5\u8be2-\u7b56\u7565<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/* mobile first \u5148\u8003\u8651\u79fb\u52a8\u4f18\u5148 *\/\n\/* \u6700\u5c0f\u5c4f \u4ece\u5c0f\u5230\u5927 *\/\n.col { width: 100%; }\n@media (min-width: 576px) { \n.col { width: 50%; }\n}\n@media (min-width: 768px) { \n.col { width: 25%; }\n}\n@media (min-width: 992px) { \n.col { width: 16.6666666667%; }\n}\n@media (min-width: 1200px) { .col { width: 8.33333333%; } }<\/code><\/pre>\n<h2>\u79fb\u52a8\u7aef\u5e38\u7528\u5355\u4f4d<\/h2>\n<ul>\n<li>px : \u56fa\u5b9a\u5927\u5c0f - em[\u4e0d\u5e38\u7528\u9ebb\u70e6] : height:5em; font-size:12; &lt;==&gt;height:60px;\n<ul>\n<li>[\u6839\u636e\u81ea\u8eab\u7684\u5b57\u4f53\u5927\u5c0f pc \u7aef\u7684 font-size \u6700\u5c0f\u662f 12] <\/li>\n<li>[\u6ce8\u610f: \u5982\u679c font-size: 12rem; \u5219 height \u4f1a\u6839\u636e\u7236\u5143\u7d20\u7684 font-size:20px,,\u53bb\u8ba1\u7b97 height: px <\/li>\n<\/ul>\n<\/li>\n<li>rem : height \u662f\u6839\u636e html \u7684 font-size \u4fee\u6539 <\/li>\n<li>vw , vh: \u89c6\u53e3\u5355\u4f4d - \u968f\u7740\u5c4f\u5e55\u7f29\u5c0f\u800c\u9ad8\u5ea6\u964d\u4f4e,\u5b57\u4f53\u53d8\u5c0f,,\u7528 rem<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\u7528 px\/em \u505a\u5355\u4f4d\uff0c\u6bcf\u6b21\u90fd\u8981\u7528 js \u4e00\u4e00\u4fee\u6539 \u80fd\u4e0d\u80fd\u7edf\u4e00\u4fee\u6539\u5462\uff1f \n375px -&gt; 1rem = 20px;\nheight = 50 \/ 20 = 2.5rem; \n750px -&gt; 1rem = 40px; \nheight = 100 \/ 40 = 2.5rem; \n?(\u89c6\u53e3\u5bbd\u5ea6) -&gt; 1rem = (? \/ 375) * 20 px \n?(\u89c6\u53e3\u5bbd\u5ea6) = document.documentElement.clientWidth \n1rem = (document.documentElement.clientWidth \/ 375) * 20 px \n1rem = (document.documentElement.clientWidth \/ 750) * 40 px \nheight = 2.5rem;\n        setRemUnit();\n        window.onresize = setRemUnit;\n        function setRemUnit() {\n            var docEl = document.documentElement;\n            var viewWidth = docEl.clientWidth;\n            docEl.style.fontSize = viewWidth \/ 375 * 20 + &#039;px&#039;;\n            \/\/ docEl.style.fontSize = viewWidth \/ 750 * 40 + &#039;px&#039;;\n            \/\/ 1rem = 20px}<\/code><\/pre>\n<h1>2.\u54cd\u5e94\u5f0f\u5e03\u5c40<\/h1>\n<h2>\u4ec0\u4e48\u662f\u54cd\u5e94\u5f0f\u5e03\u5c40<\/h2>\n<ul>\n<li>\u5bf9\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8 (\u5927\u5c0f) \u505a\u51fa\u54cd\u5e94,\u5e76\u8fdb\u884c\u76f8\u5e94(\u5bf9\u5e94)\u5e03\u5c40\u7684\u4e00\u79cd\u79fb\u52a8 Web \u5f00\u53d1\u65b9\u5f0f <\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022071421582065.png\"  alt=\"\" \/> <\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022071421582065.png\" alt=\"\" \/> <\/p><\/noscript>\n<h2>\u7ed3\u6784,\u5185\u5bb9\u548c\u5e03\u5c40\u7684\u6982\u5ff5<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    &lt;header class=&quot;header-container&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div class=&quot;header-logo-container&quot;&gt;\n                &lt;!-- \u5185\u5bb9 --&gt;\n                &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img\/logo.svg&quot; alt=&quot;logo&quot;&gt;&lt;\/a&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;header-nav-container&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<h2>\u5934\u90e8 header \u533a<\/h2>\n<ul>\n<li>\u7528\u56fe\u7247\u5f88\u8017\u8d44\u6e90<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  &lt;header class=&quot;header-container&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div class=&quot;row&quot;&gt;\n                &lt;div class=&quot;header-logo-container col-8 col-md-3&quot;&gt;\n                    &lt;a href=&quot;.\/index.html&quot; class=&quot;header-logo&quot;&gt;\n                        &lt;img src=&quot;img\/logo.svg&quot; alt=&quot;logo&quot;&gt;\n                    &lt;\/a&gt;\n                &lt;\/div&gt;\n                &lt;div class=&quot;header-btn-container col-4 d-md-none&quot;&gt;\n                    &lt;button type=&quot;button&quot; class=&quot;btn-toggle&quot; id=&quot;btn-toggle&quot;&gt;\n                        &lt;span class=&quot;btn-toggle-bar&quot;&gt;&lt;\/span&gt;\n                        &lt;span class=&quot;btn-toggle-bar&quot;&gt;&lt;\/span&gt;\n                        &lt;span class=&quot;btn-toggle-bar&quot;&gt;&lt;\/span&gt;\n                    &lt;\/button&gt;\n                &lt;\/div&gt;\n                &lt;nav class=&quot;header-nav-container col-md-9 d-none d-md-block&quot;&gt;\n                    &lt;ul class=&quot;header-nav&quot;&gt;\n                        &lt;li class=&quot;header-nav-item&quot;&gt;\n                            &lt;a href=&quot;#&quot; class=&quot;header-nav-link&quot;&gt;\u624b\u673a&amp;\u5e73\u677f&lt;\/a&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/nav&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022071515073022.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022071515073022.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>.btn-toggle {\n    padding: 10px;\n    background-color: transparent;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n}\n.btn-toggle:hover {\n    background-color: #f9f9f9;\n}\n.btn-toggle:hover .btn-toggle-bar {\n    background-color: #1428a0;\n}\n.btn-toggle-bar {\n    display: block;\n    width: 24px;\n    height: 4px;\n    background-color: #363636;\n    border-radius: 2px;\n}\n\/*\u5144\u5f1f\u9009\u62e9\u5668*\/\n\/*\u7b2c\u4e8c\u6761\u7ebf\u548c\u7b2c\u4e09\u6761\u7ebf\u4e0a\u9762\u90fd\u6709 4px,\u7b2c\u4e00\u4e2a\u4e0a\u9762\u6ca1\u6709*\/\n.btn-toggle-bar + .btn-toggle-bar {\n    margin-top: 4px;\n}<\/code><\/pre>\n<h3>\u4e09\u7ea7\u76ee\u5f55\u4e0b\u7684\u6587\u5b57\u6392\u5217<\/h3>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022080222271093.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022080222271093.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>&lt;div class=&quot;subCate&quot;&gt;\n           &lt;a v-for=&quot;item in sub&quot; :key=&quot;item&quot;&gt;{{item.text}}&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>.subCate{\n  padding-top: 15px;\n  width: 286px;\n  height: 352px;\n  display: grid;\n  grid-template-columns: 143px 143px;\n  grid-template-rows: 44px 44px 44px 44px 44px 44px 44px 44px;\n  grid-auto-flow: column;\n}\n.subCate a{\n  width: 143px;\n  line-height: 20px;\n  padding: 12px 0;\n}<\/code><\/pre>\n<h3>\u4e09\u7ea7\u76ee\u5f55\u5b9e\u73b0 v-for \u5faa\u73af\u5d4c\u5957<\/h3>\n<pre class=\"prettyprint linenums\" ><code> &lt;div class=&quot;cate-box&quot; v-for=&quot;(item) in data&quot; :key=&quot;item&quot;&gt;\n                &lt;a class=&quot;cate-title&quot; href=&quot;&quot;&gt;\n                  &lt;img alt=&quot;&quot; :src=&quot;item.url&quot;&gt;\n                  &lt;span&gt;{{item.title}}&lt;\/span&gt;\n                &lt;\/a&gt;\n                &lt;div class=&quot;subCate&quot;&gt;\n                  &lt;a v-for=&quot;(itemOne) in item.data&quot; :key=&quot;itemOne&quot;&gt;{{itemOne.text}}&lt;\/a&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code> data:[\n        {\n          url:require(&#039;..\/assets\/images\/zuanshi.png&#039;),\n          title:&#039;\u7cbe\u9009&#039;,\n          data:[\n            { text: &#039;\u8fd0\u8425\u8bbe\u8ba1&#039; },\n            { text: &#039;\u5305\u88c5&#039; },\n            { text: &#039;\u52a8\u753b\/\u5f71\u89c6&#039; },\n            { text: &#039;\u4eba\u50cf\u6444\u5f71&#039; },\n            { text: &#039;\u5546\u4e1a\u63d2\u753b&#039; },\n            { text: &#039;\u7535\u5546&#039; },\n            { text: &#039;APP \u754c\u9762&#039; },\n            { text: &#039;\u827a\u672f\u63d2\u753b&#039; },\n            { text: &#039;\u5bb6\u88c5\u8bbe\u8ba1&#039; },\n            { text: &#039;\u6d77\u62a5&#039; },\n            { text: &#039;\u6587\u7ae0&#039; }\n          ]\n        }\n      ],<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1.\u79fb\u52a8 Web \u5f00\u53d1\u5165\u95e8 \u524d\u7aef\u5f00\u53d1\u5206\u7c7b PC \u7aef\u5f00\u53d1 \u79fb\u52a8\u7aef\u5f00\u53d1 \u79fb\u52a8 Web \u5f00\u53d1 \u6df7\u5408\u5f0f\u5f00\u53d1(Hybri [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2863","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2863"}],"version-history":[{"count":23,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2863\/revisions"}],"predecessor-version":[{"id":5187,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2863\/revisions\/5187"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}