{"id":2462,"date":"2020-03-22T21:33:15","date_gmt":"2020-03-22T13:33:15","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2462"},"modified":"2026-08-18T12:35:24","modified_gmt":"2026-08-18T04:35:24","slug":"%e4%b8%ba%e4%bb%80%e4%b9%88%e8%a6%81%e7%a7%bb%e5%8a%a8%e7%ab%af%e9%80%82%e9%85%8d","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2462","title":{"rendered":"\u4e3a\u4ec0\u4e48\u8981\u79fb\u52a8\u7aef\u9002\u914d"},"content":{"rendered":"
\n

\u5f88\u591a\u4eba\u4e00\u542c\u79fb\u52a8\u7aef\u9002\u914d\u5c31\u60f3\uff1a\u76f4\u63a5 px \u5199\u6b7b\u3001\u5269\u4e0b\u81ea\u9002\u5e94\u4e0d\u5c31\u5b8c\u4e86\uff1f\u8981\u6c42\u4e25\u683c\u7684\u56e2\u961f\u4f1a\u8981\u6c42\u7f29\u653e\u6bd4\u4f8b\u4e00\u81f4\uff0c\u7b80\u5355\u8bf4\u5c31\u662f\u6bcf\u53f0\u624b\u673a\u540c\u4e00\u884c\u7684\u5b57\u6570\u90fd\u8981\u4e00\u6837\u3002\u4e0b\u9762\u4ece\u50cf\u7d20\u3001\u5206\u8fa8\u7387\u3001DPR \u8bb2\u5230 viewport\u3001rem\u3001vw \u548c\u63a8\u8350\u7684 px + flex \u6d41\u7a0b\u3002<\/p>\n

\u8bbe\u8ba1\u7a3f\u5e38\u6309 375 \u5bbd\u6765\u753b\uff0c\u4f46\u5404\u54c1\u724c\u7269\u7406\u5206\u8fa8\u7387\u4e0d\u540c\uff0c\u903b\u8f91\u5206\u8fa8\u7387\u4e5f\u4e0d\u4e00\u6837\u3002\u5de6\u53f3\u5e03\u5c40\u5982\u679c\u5de6\u8fb9\u5199\u6b7b\u3001\u53f3\u8fb9\u81ea\u9002\u5e94\uff0c\u53f3\u8fb9\u80fd\u5c55\u793a\u7684\u5185\u5bb9\u91cf\u5c31\u4f1a\u968f\u8bbe\u5907\u53d8\uff0c\u8fd9\u6b63\u662f\u8981\u9002\u914d\u7684\u539f\u56e0\u3002<\/p>\n

\u4e00\u3001\u4e3a\u4ec0\u4e48\u8981\u9002\u914d\uff1a\u50cf\u7d20\u4e0e\u5206\u8fa8\u7387<\/h2>\n

\u5148\u770b\u4e00\u5f20\u603b\u89c8\uff1a<\/p>\n

\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213330\"<\/p>\n

\u5c4f\u5e55\u5c3a\u5bf8\u6309\u5bf9\u89d2\u7ebf\u8ba1\u91cf\uff0c\u5355\u4f4d\u82f1\u5bf8\u3002\u4e0b\u56fe\u4e24\u6761\u5bf9\u89d2\u7ebf\u957f\u5ea6\u5c31\u662f\u5c4f\u5e55\u5c3a\u5bf8\uff1a<\/p>\n

\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213423\"<\/a><\/p>\n

\u50cf\u7d20<\/h3>\n

\u4e0a\u56fe 320\u00d7480 \u53eb\u5206\u8fa8\u7387\uff1a\u6a2a\u5411 320 \u4e2a\u50cf\u7d20\u3001\u7eb5\u5411 480 \u4e2a\u50cf\u7d20\u3002\u50cf\u7d20<\/strong>\uff08pixel\uff09\u662f\u7ec4\u6210\u56fe\u50cf\u4eae\u5ea6\u548c\u8272\u5ea6\u7684\u6700\u5c0f\u5355\u5143\uff0c\u4e5f\u662f\u8f6f\u786c\u4ef6\u80fd\u63a7\u5236\u7684\u6700\u5c0f\u5355\u4f4d\u3002\u4e00\u5e45\u56fe\u7531\u6210\u5343\u4e0a\u4e07\u50cf\u7d20\u7d27\u6328\u7740\uff0c\u4eba\u773c\u770b\u6210\u6574\u56fe\u3002\u5355\u4f4d\u9762\u79ef\u50cf\u7d20\u8d8a\u591a\u6548\u679c\u8d8a\u597d\u3002\u6bcf\u4e2a\u50cf\u7d20\u7684\u7269\u7406\u5927\u5c0f\u4e0d\u56fa\u5b9a\uff0c\u7531\u8bbe\u5907\u5206\u8fa8\u7387\u51b3\u5b9a\u3002<\/p>\n

\u5206\u8fa8\u7387<\/h3>\n

\u5c4f\u5e55\u5206\u8fa8\u7387\u662f\u7eb5\u6a2a\u50cf\u7d20\u70b9\u6570\uff0c\u5355\u4f4d px\uff0c\u51b3\u5b9a\u5c4f\u5e55\u80fd\u663e\u793a\u591a\u5c11\u4fe1\u606f\u3002\u540c\u6837\u5c3a\u5bf8\u7684\u5c4f\uff0c640\u00d7480 \u65f6\u50cf\u7d20\u5c11\u3001\u5355\u4e2a\u50cf\u7d20\u5927\uff1b1600\u00d71200 \u65f6\u50cf\u7d20\u591a\u3001\u5355\u4e2a\u50cf\u7d20\u5c0f\u3002<\/p>\n

\u5947\u602a\u7684\u662f\uff1a\u82f9\u679c\u5b98\u7f51\u4e0a iPhone 6 \u662f 750\u00d71334\uff0c\u8bbe\u8ba1\u7a3f\u5374\u662f 375\u00d7667\uff0c\u800c\u4e14\u5404\u8bbe\u5907\u201cCSS \u5206\u8fa8\u7387\u201d\u90fd\u6bd4\u7269\u7406\u5206\u8fa8\u7387\u5c0f\u4e00\u622a\u3002\u8fd9\u5c31\u8981\u533a\u5206\u7269\u7406\u50cf\u7d20\u548c\u903b\u8f91\u50cf\u7d20\u3002<\/p>\n

\u8bbe\u5907\u7269\u7406\u5206\u8fa8\u7387\uff08\u8bbe\u5907\u50cf\u7d20\uff09<\/h3>\n

\u4ece\u84dd\u5c4f\u5230\u5f69\u5c4f\u3001\u89e6\u5c4f\u518d\u5230\u667a\u80fd\u624b\u673a\uff0c\u5c4f\u8d8a\u6765\u8d8a\u6e05\u6670\u3001\u8d8a\u6765\u8d8a\u5927\u3002\u5206\u8fa8\u7387\u4ece\u9897\u7c92\u611f\u5f88\u91cd\uff0c\u5230 720p\u30011080p \u751a\u81f3 2K\uff1a<\/p>\n

\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213453\"<\/a><\/p>\n

\u7269\u7406\u5206\u8fa8\u7387\u7ffb\u500d\uff0c\u82e5\u4ecd\u6309\u7269\u7406\u50cf\u7d20\u753b\u56fe\uff0c\u56fe\u50cf\u4f1a\u7f29\u5c0f\u4e00\u500d\u2014\u2014\u603b\u4e0d\u80fd\u7ed9\u6bcf\u53f0\u8bbe\u5907\u51fa\u4e00\u5957\u7a3f\u3002\u4e54\u5e03\u65af\u5f88\u65e9\u5c31\u7528\u903b\u8f91\u5206\u8fa8\u7387\u628a\u8fd9\u4e2a\u95ee\u9898\u6309\u4f4f\u4e86\u3002<\/p>\n

\u903b\u8f91\u5206\u8fa8\u7387\uff08\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\uff09<\/h3>\n

\u5404\u673a\u7269\u7406\u5206\u8fa8\u7387\u5dee\u5f88\u591a\uff0c\u903b\u8f91\u5206\u8fa8\u7387\u5374\u5dee\u4e0d\u591a\u3002iPhone 4 \u53d1\u5e03\u4f1a\u4e0a\u63d0\u51fa Retina\uff1a\u628a 2\u00d72 \u4e2a\u7269\u7406\u50cf\u7d20\u5f53 1 \u4e2a\u50cf\u7d20\u7528\uff0c\u66f4\u7cbe\u81f4\u4f46\u5143\u7d20 CSS \u5927\u5c0f\u4e0d\u53d8\u3002\u9ad8\u5206\u5c4f\u4ece\u6b64\u591a\u4e86\u903b\u8f91\u50cf\u7d20\u3002\u903b\u8f91\u50cf\u7d20\u5dee\u522b\u4e0d\u5927\u4f46\u4ecd\u6709\u5dee\u522b\uff0c\u79fb\u52a8\u7aef\u9875\u9762\u624d\u9700\u8981\u9002\u914d\u3002<\/p>\n

\u4e8c\u3001\u8bbe\u5907\u50cf\u7d20\u6bd4\u4e0e 1px \u8fb9\u6846<\/h2>\n

DPR<\/strong>\uff08device pixel ratio\uff09= \u7269\u7406\u50cf\u7d20 \/ \u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\u3002CSS \u5199 1px \u65f6\uff0c\u6309 DPR \u6620\u5c04\u53ef\u80fd\u53d8\u6210 2px \u6216 3px \u7269\u7406\u50cf\u7d20\uff1b\u5927\u5c4f\u4e0a\u5c31\u4f1a\u663e\u5f97\u5f88\u7c97\uff0c\u8fd9\u5c31\u662f\u7ecf\u5178\u7684 1 \u50cf\u7d20\u8fb9\u6846\u95ee\u9898\u3002<\/p>\n

Web \u91cc\u7528 window.devicePixelRatio<\/code> \u53d6 dpr\uff1bCSS \u7528 min-device-pixel-ratio<\/code> \u5a92\u4f53\u67e5\u8be2\u3002\u76f4\u63a5\u5199 0.5px \u517c\u5bb9\u5f88\u5dee\uff1a<\/p>\n

\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213632\"<\/a><\/p>\n

Chrome \u628a 0.5px \u56db\u820d\u4e94\u5165\u6210 1px\uff0cFirefox \/ Safari \u80fd\u753b\u534a\u50cf\u7d20\uff1b\u5c0f\u4e8e 0.5px \u65f6 Chrome \u5f53 0\uff0cFirefox \u628a\u4e0d\u5c0f\u4e8e 0.55 \u5f53 1\uff0cSafari \u628a\u4e0d\u5c0f\u4e8e 0.75 \u5f53 1\u3002iOS \u4e0a Chrome \u80fd\u753b\u51fa 0.5px\uff0cAndroid 5.0 \u539f\u751f\u6d4f\u89c8\u5668\u4e0d\u884c\u3002\u5c0f\u6570 px \u7684\u5bbd\u9ad8\u540c\u6837\u4e0d\u53ef\u9760\u3002<\/p>\n

\u66f4\u7a33\u7684\u505a\u6cd5\u662f transform: scale(0.5)<\/strong>\uff1a<\/p>\n

div {\n\n    height:1px;\n\n    background:#000;\n\n    -webkit-transform: scaleY(0.5);\n\n    -webkit-transform-origin:0 0;\n\n    overflow: hidden;\n\n}<\/code><\/pre>\n
\u518d\u6309 2 \u500d\u5c4f \/ 3 \u500d\u5c4f\u5a92\u4f53\u67e5\u8be2\uff1a<\/p>\n
\/* 2\u500d\u5c4f *\/\n\n@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {\n\n    .border-bottom::after {\n\n        -webkit-transform: scaleY(0.5);\n\n        transform: scaleY(0.5);\n\n    }\n\n}\n\n\n\n\/* 3\u500d\u5c4f *\/\n\n@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {\n\n    .border-bottom::after {\n\n        -webkit-transform: scaleY(0.33);\n\n        transform: scaleY(0.33);\n\n    }\n\n}<\/code><\/pre>\n
\u4e09\u3001viewport \u4e0e\u4e09\u79cd\u9002\u914d<\/h2>\n
viewport<\/h3>\n
\u89c6\u53e3\u662f\u5f53\u524d\u53ef\u89c1\u533a\u57df\uff0c\u5728\u6d4f\u89c8\u5668\u91cc\u901a\u5e38\u7b49\u4e8e\u7a97\u53e3\u5185\u5bb9\u533a\uff08\u4e0d\u542b\u83dc\u5355\u680f\uff09\u3002\u79fb\u52a8\u7aef\u7528\u4e00\u4e2a meta \u914d\u7f6e\uff1a<\/p>\n
<meta name=\"viewport\" content=\"width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;\"><\/code><\/pre>\n
\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213528\"<\/a><\/p>\n
\u8981\u4f53\u9a8c\u597d\uff0c\u89c6\u53e3\u5bbd\u5ea6\u5fc5\u987b\u63a5\u8fd1\u7406\u60f3\u89c6\u53e3<\/strong>\uff1a\u4e0d\u624b\u52a8\u7f29\u653e\u65f6\u6700\u7406\u60f3\u7684\u5e03\u5c40\u5c3a\u5bf8\uff0c\u4e5f\u5c31\u662f\u5c4f\u5e55\u5bbd\u5ea6\u3002\u4e0a\u9762\u8fd9\u5957 meta \u89c4\u5b9a\u5bbd\u5ea6\u7b49\u4e8e\u8bbe\u5907\u5bbd\u5ea6\u3001\u521d\u59cb\u7f29\u653e 1\uff0c\u89c6\u89c9\u89c6\u53e3\u5c31\u662f\u7406\u60f3\u89c6\u53e3\u3002user-scalable=no<\/code> \u8fd8\u53ef\u4ee5\u53bb\u6389\u79fb\u52a8\u7aef\u70b9\u51fb 300ms \u5ef6\u8fdf\uff08\u62d3\u5c55\uff09\u3002<\/p>\n
1\uff09rem \u9002\u914d<\/h3>\n
rem \u76f8\u5bf9 HTML \u6839\u5143\u7d20\u3002\u6539\u6839\u5b57\u4f53\u5c31\u80fd\u6309\u6bd4\u4f8b\u6539\u6574\u9875\uff0c\u53c8\u907f\u514d em \u5c42\u5c42\u590d\u5408\u3002IE8 \u53ca\u66f4\u65e9\u4e0d\u652f\u6301\uff0c\u53ef\u518d\u5199\u4e00\u4efd\u7edd\u5bf9\u5355\u4f4d\u515c\u5e95\u3002<\/p>\n
\/\/\u5047\u8bbe\u6211\u7ed9\u6839\u5143\u7d20\u7684\u5927\u5c0f\u8bbe\u7f6e\u4e3a14px\n\nhtml{\n\n    font-size\uff1a14px\n\n}\n\n\/\/\u90a3\u4e48\u6211\u5e95\u4e0b\u7684p\u6807\u7b7e\u5982\u679c\u60f3\u8981\u4e5f\u662f14\u50cf\u7d20\n\np{\n\n    font-size:1rem\n\n}\n\n\/\/\u5982\u6b64\u5373\u53ef<\/code><\/pre>\n
\u963f\u91cc\u65e9\u671f\u7684 flexible \u8ba9\u9875\u9762\u7edf\u4e00\u7528 rem\uff1a\u628a 1rem = viewWidth \/ 10<\/code>\u3002<\/p>\n
\/\/ set 1rem = viewWidth \/ 10\n\nfunction setRemUnit () {\n\n    var rem = docEl.clientWidth \/ 10\n\n    docEl.style.fontSize = rem + 'px'\n\n}\n\nsetRemUnit();<\/code><\/pre>\n
\u521d\u59cb\u5316\u65f6\u7ed9\u6839\u5143\u7d20\u8bbe font-size\uff0c\u5176\u4f59\u6309 rem \u6392\uff0c\u7a97\u53e3\u53d8\u5316\u5c31\u7b49\u6bd4\u7f29\u653e\uff0c\u8bbe\u8ba1\u7a3f px \u518d\u6362\u6210 rem\u3002\u8fd9\u662f\u8fc7\u6e21\u65b9\u6848\uff1a\u5f53\u5e74\u4f4e\u7248\u672c Android \u7684 viewport\u3001\u4ee5\u53ca vw\/vh \u517c\u5bb9\u8fd8\u4e0d\u9f50\uff0cflexible \u7528 rem \u6a21\u62df vmin\u3002\u6309\u5c4f\u5e55\u5927\u5c0f 100% \u8fd8\u539f\u8bbe\u8ba1\u7a3f\uff0ciPhone 5 \u548c 6 Plus \u4e0a\u5b57\u53f7\u5b9e\u9645\u4e0d\u540c\uff1b\u800c\u4eba\u5728\u76f8\u540c\u8ddd\u79bb\u4e0a\u5e0c\u671b\u770b\u5230\u7684\u5927\u5c0f\u63a5\u8fd1\u3002\u7528\u6237\u4e70\u5927\u5c4f\u662f\u60f3\u770b\u66f4\u591a\u5185\u5bb9\uff0c\u4e0d\u662f\u66f4\u5927\u7684\u5b57<\/strong>\u3002\u7eaf\u7f29\u653e\u65b9\u6848\u6ce8\u5b9a\u88ab\u6dd8\u6c70\u3002<\/p>\n
2\uff09vw \/ vh \u5e03\u5c40<\/h3>\n
\u628a\u89c6\u89c9\u89c6\u53e3\u5bbd window.innerWidth\u3001\u9ad8 window.innerHeight \u5404\u5206\u6210 100 \u4efd\u3002<\/p>\n
\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200322213605\"<\/a><\/p>\n
\u548c rem \u7c7b\u4f3c\u8981\u505a\u5355\u4f4d\u6362\u7b97\uff0cpx \u8f6c vw \u8fd8\u4e0d\u4e00\u5b9a\u6574\u9664\uff0c\u4f1a\u6709\u50cf\u7d20\u5dee\u3002\u5de5\u7a0b\u4e0a\u53ef\u7528 postcss-px-to-viewport \u5728\u6784\u5efa\u65f6\u81ea\u52a8\u8f6c\uff1a<\/p>\n
{\n\n    loader: 'postcss-loader',\n\n    options: {\n\n    \tplugins: ()=>[\n\n        \trequire('autoprefixer')({\n\n        \t\tbrowsers: ['last 5 versions']\n\n        \t}),\n\n        \trequire('postcss-px-to-viewport')({\n\n        \t\tviewportWidth: 375, \/\/\u89c6\u53e3\u5bbd\u5ea6\uff08\u6570\u5b57)\n\n        \t\tviewportHeight: 1334, \/\/\u89c6\u53e3\u9ad8\u5ea6\uff08\u6570\u5b57\uff09\n\n        \t\tunitPrecision: 3, \/\/\u8bbe\u7f6e\u7684\u4fdd\u7559\u5c0f\u6570\u4f4d\u6570\uff08\u6570\u5b57\uff09\n\n        \t\tviewportUnit: 'vw', \/\/\u8bbe\u7f6e\u8981\u8f6c\u6362\u7684\u5355\u4f4d\uff08\u5b57\u7b26\u4e32\uff09\n\n        \t\tselectorBlackList: ['.ignore', '.hairlines'], \/\/\u4e0d\u9700\u8981\u8fdb\u884c\u8f6c\u6362\u7684\u7c7b\u540d\uff08\u6570\u7ec4\uff09\n\n                minPixelValue: 1, \/\/\u8bbe\u7f6e\u8981\u66ff\u6362\u7684\u6700\u5c0f\u50cf\u7d20\u503c\uff08\u6570\u5b57\uff09\n\n                mediaQuery: false \/\/\u5141\u8bb8\u5728\u5a92\u4f53\u67e5\u8be2\u4e2d\u8f6c\u6362px\uff08true\/false\uff09\n\n        \t})\n\n    \t]\n\n}<\/code><\/pre>\n
3\uff09px \u4e3a\u4e3b\uff0cvw \u4e3a\u8f85\uff0c\u642d\u914d flex\uff08\u63a8\u8350\uff09<\/h3>\n
\u5927\u5c4f\u624b\u673a\u662f\u4e3a\u4e86\u770b\u66f4\u591a\u5185\u5bb9\uff0c\u6240\u4ee5\u76f4\u63a5\u7528 px \u5f80\u5f80\u6700\u660e\u667a\u3002vw\u3001rem \u5e76\u975e\u4e0d\u80fd\u7528\uff0c\u4f46\u5728 flex \u5df2\u7ecf\u666e\u53ca\u7684\u4eca\u5929\uff0c\u8fd8\u6b7b\u5b88\u6574\u9875\u7b49\u6bd4\u7f29\u653e\uff0c\u591a\u534a\u662f\u4e0d\u613f\u505a\u5206\u673a\u578b\u9002\u914d\uff0c\u6216\u4e0d\u613f\u5b66\u65b0\u5e03\u5c40\u3002<\/p>\n
\u56db\u3001\u63a8\u8350\u843d\u5730\u6d41\u7a0b<\/h2>\n