{"id":1177,"date":"2024-12-05T18:37:36","date_gmt":"2024-12-05T10:37:36","guid":{"rendered":"http:\/\/www.max-shu.com\/blog\/?p=1177"},"modified":"2024-12-05T18:37:38","modified_gmt":"2024-12-05T10:37:38","slug":"css%e5%88%a9%e7%94%a8media%e5%92%8cviewport%e5%ae%9e%e7%8e%b0%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80%e8%87%aa%e5%8a%a8%e9%80%82%e9%85%8d%e6%89%8b%e6%9c%ba%e7%94%b5%e8%84%91%e7%ad%89","status":"publish","type":"post","link":"http:\/\/www.max-shu.com\/blog\/?p=1177","title":{"rendered":"CSS\u5229\u7528@media\u548cviewport\u5b9e\u73b0\u54cd\u5e94\u5f0f\u5e03\u5c40\u81ea\u52a8\u9002\u914d\u624b\u673a\u7535\u8111\u7b49"},"content":{"rendered":"\n

\u4e86\u89e3@Media\u76f8\u5173\uff1a<\/strong><\/p>\n\n\n\n

1\u3001\u4e86\u89e3Media Queries<\/strong><\/p>\n\n\n\n

Media Queries\u80fd\u5728\u4e0d\u540c\u7684\u6761\u4ef6\u4e0b\u4f7f\u7528\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u4f7f\u9875\u9762\u5728\u4e0d\u540c\u5728\u7ec8\u7aef\u8bbe\u5907\u4e0b\u8fbe\u5230\u4e0d\u540c\u7684\u6e32\u67d3\u6548\u679c\u3002\u5176\u539f\u7406\u5c31\u662f\u5141\u8bb8\u6dfb\u52a0\u8868\u8fbe\u5f0f\u7528\u4ee5\u5a92\u4f53\u67e5\u8be2\uff08\u5305\u62ec\u5a92\u4f53\u7c7b\u578b\u548c\u5a92\u4f53\u7279\u6027\uff09\uff0c\u4ee5\u6b64\u6765\u9009\u62e9\u4e0d\u540c\u7684\u6837\u5f0f\u8868\uff0c\u4ece\u800c\u81ea\u52a8\u9002\u5e94\u4e0d\u540c\u7684\u5c4f\u5e55\u5206\u8fa8\u7387\u3002<\/p>\n\n\n\n

css2\u91cc\u9762\u867d\u7136\u652f\u6301@media\u5c5e\u6027\uff0c\u4f46\u662f\u80fd\u5b9e\u73b0\u7684\u529f\u80fd\u6bd4\u8f83\u5c11\uff0c\u4e00\u822c\u53ea\u7528\u505a\u6253\u5370\u7684\u65f6\u5019\u505a\u7279\u6b8a\u5b9a\u4e49\u7684CSS\uff0c\u6211\u4eec\u4e0d\u53bb\u8ba8\u8bba\u3002<\/p>\n\n\n\n

css3\u7684@media\u5c5e\u6027\u5728CSS3\u91cc\u9762\u5df2\u7ecf\u6f14\u53d8\u6210\u4e00\u79cd media queries\uff08\u5a92\u4f53\u67e5\u8be2\/\u5339\u914d\uff09\u4e86,\u5728CSS3\u91cc\u9762\uff0c\u53ef\u4ee5\u7528\u67e5\u8be2\u8bed\u53e5\u6765\u5339\u914d\u5404\u79cd\u7c7b\u578b\u7684\u5c4f\u5e55\u3002<\/p>\n\n\n\n

2\u3001\u4e86\u89e3@media \u548c @media screen\u7684\u533a\u522b<\/strong><\/p>\n\n\n\n

@media screen\u7684css\u5728\u6253\u5370\u8bbe\u5907\u91cc\u662f\u65e0\u6548\u7684\uff0c\u800c@media\u5728\u6253\u5370\u8bbe\u5907\u91cc\u662f\u6709\u6548\u7684\uff0c\u5982\u679ccss\u9700\u8981\u7528\u5728\u6253\u5370\u8bbe\u5907\u91cc\uff0c\u90a3\u4e48\u5c31\u7528@media \uff0c\u5426\u5219\uff0c\u5c31\u7528@media screen\u3002\u4e0d\u8fc7\u8fd9\u53ea\u662f\u7b3c\u7edf\u7684\u505a\u6cd5\uff0c\u5176\u5b9e\u5982\u679c\u628a\u201cscreen\u201d\u6362\u4e3a\u201cprint\u201d\uff0c\u5199\u4e3a@media print\uff0c\u90a3\u4e48\u8be5css\u5c31\u53ef\u7528\u5230\u6253\u5370\u8bbe\u5907\u4e0a\u4e86\uff0c\u4f46\u8981\u6ce8\u610f\uff0c@media print\u58f0\u660e\u7684css\u53ea\u80fd\u5728\u6253\u5370\u8bbe\u5907\u4e0a\u6709\u6548\u3002<\/p>\n\n\n\n

3\u3001\u4e86\u89e3CSS\u4e2d\u7684width\u3001device-width\u3001resolution\u3001aspect-ratio<\/strong><\/p>\n\n\n\n

width\/height \uff1a\u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684 \u9875\u9762\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\/\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

device-width\/height  \uff1a\u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\/\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

resolution \uff1a\u5b9a\u4e49\u8bbe\u5907\u7684\u5206\u8fa8\u7387\u3002\u5982\uff1a96dpi, 300dpi, 118dpcm<\/p>\n\n\n\n

aspect-ratio \uff1a\u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6bd4\u7387\u3002<\/p>\n\n\n\n

4\u3001\u4e86\u89e3media\u6837\u5f0f\u7684\u4f7f\u7528\u65b9\u6cd5<\/strong><\/p>\n\n\n\n

4.1\u3001\u4e00\u79cd\u65b9\u6cd5\u662f\u76f4\u63a5\u5728link\u4e2d\u5224\u65ad\u8bbe\u5907\u7684\u5c3a\u5bf8\uff0c\u7136\u540e\u5f15\u7528\u4e0d\u540c\u7684css\u6587\u4ef6\uff1a<\/p>\n\n\n\n

<link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css”><\/p>\n\n\n\n

    demo\u5982\u4e0b\uff1a\u5f53\u524d\u5c4f\u5e55\u7684\u5bbd\u5ea6\u5927\u4e8e\u7b49\u4e8e400px\u65f6\u5e94\u7528 styleA.css\u6837\u5f0f\u6587\u4ef6\u3002\u3002<\/p>\n\n\n\n

<link rel=”stylesheet” type=”text\/css” href=”styleA.css” media=”screen and (min-width: 400px)”><\/p>\n\n\n\n

4.2\u3001\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u76f4\u63a5\u5199\u5728 style \u6807\u7b7e\u91cc\uff1a<\/p>\n\n\n\n

    @media mediatype and|not|only (media feature) {<\/p>\n\n\n\n

        CSS-Code;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

demo\u5982\u4e0b\uff1ascreen \u662f\u5a92\u4f53\u7c7b\u578b\u91cc\u7684\u4e00\u79cd\uff0cCSS2.1\u5b9a\u4e49\u4e86\u591a\u79cd\u5a92\u4f53\u7c7b\u578b<\/p>\n\n\n\n

<style><\/p>\n\n\n\n

    @media screen and (max-width: 600px) { \/*\u5f53\u5c4f\u5e55\u5c3a\u5bf8\u5c0f\u4e8e600px\u65f6\uff0c\u5e94\u7528\u4e0b\u9762\u7684CSS\u6837\u5f0f*\/<\/p>\n\n\n\n

      .class {<\/p>\n\n\n\n

        background: #ccc;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

<\/style><\/p>\n\n\n\n

   \u4e0a\u8ff0\u683c\u5f0f\u662f\u4e2d\u4f7f\u7528\u201c@media\u201d\u5f00\u5934\uff0c\u7136\u540e\u6307\u5b9a\u5a92\u4f53\u7c7b\u578b\uff08\u7406\u89e3\u4e3a\u8bbe\u5907\u7c7b\u578b\uff09\uff0c\u968f\u540e\u662f\u6307\u5b9a\u5a92\u4f53\u7279\u6027\uff08\u7406\u89e3\u4e3a\u5c4f\u5e55\u5c3a\u5bf8\uff09\uff0c\u5176\u4e2d\u8fd8\u5305\u62ec\u5173\u952e\u5b57and \u3001 not(\u6392\u9664\u67d0\u79cd\u8bbe\u5907)\u3001only(\u9650\u5b9a\u67d0\u79cd\u8bbe\u5907)<\/p>\n\n\n\n

@media\u540e\u5e26\u7684\u53c2\u6570\u8be6\u89e3<\/strong><\/p>\n\n\n\n

\u591a\u5a92\u4f53\u7c7b\u578b mediatype<\/strong><\/p>\n\n\n\n

\u503c    \u63cf\u8ff0<\/p>\n\n\n\n

all    \u7528\u4e8e\u6240\u6709\u591a\u5a92\u4f53\u7c7b\u578b\u8bbe\u5907<\/p>\n\n\n\n

print    \u7528\u4e8e\u6253\u5370\u673a<\/p>\n\n\n\n

screen    \u7528\u4e8e\u7535\u8111\u5c4f\u5e55\uff0c\u5e73\u677f\uff0c\u667a\u80fd\u624b\u673a\u7b49\u3002<\/p>\n\n\n\n

speech    \u7528\u4e8e\u5c4f\u5e55\u9605\u8bfb\u5668<\/p>\n\n\n\n

\u591a\u5a92\u4f53\u7279\u6027 media feature<\/strong><\/p>\n\n\n\n

\u5a92\u4f53\u7279\u6027\u662f\u901a\u8fc7min\u6765\u8868\u793a\u5927\u4e8e\u7b49\u4e8e\u6216max\u8868\u793a\u5c0f\u4e8e\u505a\u4e3a\u903b\u8f91\u5224\u65ad\uff0c<\/p>\n\n\n\n

\u503c    \u63cf\u8ff0<\/p>\n\n\n\n

aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6bd4\u7387<\/p>\n\n\n\n

color    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u6bcf\u4e00\u7ec4\u5f69\u8272\u539f\u4ef6\u7684\u4e2a\u6570\u3002\u5982\u679c\u4e0d\u662f\u5f69\u8272\u8bbe\u5907\uff0c\u5219\u503c\u7b49\u4e8e0<\/p>\n\n\n\n

color-index    \u5b9a\u4e49\u5728\u8f93\u51fa\u8bbe\u5907\u7684\u5f69\u8272\u67e5\u8be2\u8868\u4e2d\u7684\u6761\u76ee\u6570\u3002\u5982\u679c\u6ca1\u6709\u4f7f\u7528\u5f69\u8272\u67e5\u8be2\u8868\uff0c\u5219\u503c\u7b49\u4e8e0<\/p>\n\n\n\n

device-aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6bd4\u7387\u3002<\/p>\n\n\n\n

device-height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

device-width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

grid    \u7528\u6765\u67e5\u8be2\u8f93\u51fa\u8bbe\u5907\u662f\u5426\u4f7f\u7528\u6805\u683c\u6216\u70b9\u9635\u3002<\/p>\n\n\n\n

height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

max-aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6700\u5927\u6bd4\u7387\u3002<\/p>\n\n\n\n

max-color    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u6bcf\u4e00\u7ec4\u5f69\u8272\u539f\u4ef6\u7684\u6700\u5927\u4e2a\u6570\u3002<\/p>\n\n\n\n

max-color-index    \u5b9a\u4e49\u5728\u8f93\u51fa\u8bbe\u5907\u7684\u5f69\u8272\u67e5\u8be2\u8868\u4e2d\u7684\u6700\u5927\u6761\u76ee\u6570\u3002<\/p>\n\n\n\n

max-device-aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6700\u5927\u6bd4\u7387\u3002<\/p>\n\n\n\n

max-device-height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u7684\u6700\u5927\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

max-device-width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u6700\u5927\u53ef\u89c1\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

max-height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u6700\u5927\u53ef\u89c1\u533a\u57df\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

max-monochrome    \u5b9a\u4e49\u5728\u4e00\u4e2a\u5355\u8272\u6846\u67b6\u7f13\u51b2\u533a\u4e2d\u6bcf\u50cf\u7d20\u5305\u542b\u7684\u6700\u5927\u5355\u8272\u539f\u4ef6\u4e2a\u6570\u3002<\/p>\n\n\n\n

max-resolution    \u5b9a\u4e49\u8bbe\u5907\u7684\u6700\u5927\u5206\u8fa8\u7387\u3002<\/p>\n\n\n\n

max-width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u6700\u5927\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

min-aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6700\u5c0f\u6bd4\u7387\u3002<\/p>\n\n\n\n

min-color    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u6bcf\u4e00\u7ec4\u5f69\u8272\u539f\u4ef6\u7684\u6700\u5c0f\u4e2a\u6570\u3002<\/p>\n\n\n\n

min-color-index    \u5b9a\u4e49\u5728\u8f93\u51fa\u8bbe\u5907\u7684\u5f69\u8272\u67e5\u8be2\u8868\u4e2d\u7684\u6700\u5c0f\u6761\u76ee\u6570\u3002<\/p>\n\n\n\n

min-device-aspect-ratio    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u53ef\u89c1\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\u7684\u6700\u5c0f\u6bd4\u7387\u3002<\/p>\n\n\n\n

min-device-width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u6700\u5c0f\u53ef\u89c1\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

min-device-height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u7684\u5c4f\u5e55\u7684\u6700\u5c0f\u53ef\u89c1\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

min-height    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u6700\u5c0f\u53ef\u89c1\u533a\u57df\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

min-monochrome    \u5b9a\u4e49\u5728\u4e00\u4e2a\u5355\u8272\u6846\u67b6\u7f13\u51b2\u533a\u4e2d\u6bcf\u50cf\u7d20\u5305\u542b\u7684\u6700\u5c0f\u5355\u8272\u539f\u4ef6\u4e2a\u6570<\/p>\n\n\n\n

min-resolution    \u5b9a\u4e49\u8bbe\u5907\u7684\u6700\u5c0f\u5206\u8fa8\u7387\u3002<\/p>\n\n\n\n

min-width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u6700\u5c0f\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

monochrome    \u5b9a\u4e49\u5728\u4e00\u4e2a\u5355\u8272\u6846\u67b6\u7f13\u51b2\u533a\u4e2d\u6bcf\u50cf\u7d20\u5305\u542b\u7684\u5355\u8272\u539f\u4ef6\u4e2a\u6570\u3002\u5982\u679c\u4e0d\u662f\u5355\u8272\u8bbe\u5907\uff0c\u5219\u503c\u7b49\u4e8e0<\/p>\n\n\n\n

orientation    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u9ad8\u5ea6\u662f\u5426\u5927\u4e8e\u6216\u7b49\u4e8e\u5bbd\u5ea6\u3002\uff08\u68c0\u6d4b\u8bbe\u5907\u76ee\u524d\u5904\u4e8e\u6a2a\u5411\u8fd8\u662f\u7eb5\u5411\u72b6\u6001\u3002\uff09<\/p>\n\n\n\n

resolution    \u5b9a\u4e49\u8bbe\u5907\u7684\u5206\u8fa8\u7387\u3002\u5982\uff1a96dpi, 300dpi, 118dpcm<\/p>\n\n\n\n

scan    \u5b9a\u4e49\u7535\u89c6\u7c7b\u8bbe\u5907\u7684\u626b\u63cf\u5de5\u5e8f\u3002<\/p>\n\n\n\n

width    \u5b9a\u4e49\u8f93\u51fa\u8bbe\u5907\u4e2d\u7684\u9875\u9762\u53ef\u89c1\u533a\u57df\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

and \/ not \/ only \/ all<\/strong><\/p>\n\n\n\n

not: not\u662f\u7528\u6765\u6392\u9664\u6389\u67d0\u4e9b\u7279\u5b9a\u7684\u8bbe\u5907\u7684\uff0c\u6bd4\u5982 @media not print\uff08\u975e\u6253\u5370\u8bbe\u5907\uff09\u3002<\/p>\n\n\n\n

only: \u7528\u6765\u5b9a\u67d0\u79cd\u7279\u522b\u7684\u5a92\u4f53\u7c7b\u578b\u3002<\/p>\n\n\n\n

\u5bf9\u4e8e\u652f\u6301 Media Queries \u7684\u79fb\u52a8\u8bbe\u5907\u6765\u8bf4\uff0c\u5982\u679c\u5b58\u5728 only \u5173\u952e\u5b57\uff0c\u79fb\u52a8\u8bbe\u5907\u7684 Web \u6d4f\u89c8\u5668\u4f1a\u5ffd\u7565 only\u5173\u952e\u5b57\u5e76\u76f4\u63a5\u6839\u636e\u540e\u9762\u7684\u8868\u8fbe\u5f0f\u5e94\u7528\u6837\u5f0f\u6587\u4ef6\u3002<\/p>\n\n\n\n

\u5bf9\u4e8e\u4e0d\u652f\u6301 Media Queries \u7684\u8bbe\u5907\u4f46\u80fd\u591f\u8bfb\u53d6 Media Type \u7c7b\u578b\u7684 Web\u6d4f\u89c8\u5668\uff0c\u9047\u5230 only \u5173\u952e\u5b57\u65f6\u4f1a\u5ffd\u7565\u8fd9\u4e2a\u6837\u5f0f\u6587\u4ef6\u3002only\u7528\u6765\u6307\u5b9a\u67d0\u79cd\u7279\u5b9a\u7684\u5a92\u4f53\u7c7b\u578b\uff0c\u53ef\u4ee5\u7528\u6765\u6392\u9664\u4e0d\u652f\u6301\u5a92\u4f53\u67e5\u8be2\u7684\u6d4f\u89c8\u5668\u3002<\/p>\n\n\n\n

all: \u6240\u6709\u8bbe\u5907\uff0c\u8fd9\u4e2a\u5e94\u8be5\u7ecf\u5e38\u770b\u5230\u3002\u5728Media Query\u4e2d\u5982\u679c\u6ca1\u6709\u660e\u786e\u6307\u5b9aMedia Type\uff0c\u90a3\u4e48\u5176\u9ed8\u8ba4\u4e3aall<\/p>\n\n\n\n

@media\u4f7f\u7528\u4f8b\u5b50<\/strong><\/p>\n\n\n\n

demo1<\/strong>\uff1a\u53ef\u4ee5\u4f7f\u7528\u5173\u952e\u8bcd”and”\u5c06\u591a\u4e2a\u5a92\u4f53\u7279\u6027\u7ed3\u5408\u5728\u4e00\u8d77\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u4e00\u4e2aMedia Query\u4e2d\u53ef\u4ee5\u5305\u542b0\u5230\u591a\u4e2a\u8868\u8fbe\u5f0f\uff0c\u8868\u8fbe\u5f0f\u53c8\u53ef\u4ee5\u5305\u542b0\u5230\u591a\u4e2a\u5173\u952e\u5b57\uff0c\u4ee5\u53ca\u4e00\u79cd\u5a92\u4f53\u7c7b\u578b\u3002\u5f53\u5c4f\u5e55\u5728600px~900px\u4e4b\u95f4\u65f6\uff0cbody\u7684\u80cc\u666f\u8272\u6e32\u67d3\u4e3a\u201c#f5f5f5\u201d\uff0c\u5982\u4e0b\u6240\u793a\u3002<\/p>\n\n\n\n

@media screen and (min-width:600px) and (max-width:900px){<\/p>\n\n\n\n

  body {background-color:#f5f5f5;}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

demo2<\/strong>\uff1a\u53ef\u4ee5\u4f7f\u7528\u591a\u6761\u8bed\u53e5\u6765\u5c06\u540c\u4e00\u4e2a\u6837\u5f0f\u5e94\u7528\u4e8e\u4e0d\u540c\u7684\u5a92\u4f53\u7c7b\u578b\u548c\u5a92\u4f53\u7279\u6027\u4e2d\u3002style.css\u6837\u5f0f\u88ab\u7528\u5728\u5bbd\u5ea6\u5c0f\u4e8e\u6216\u7b49\u4e8e480px\u7684\u624b\u6301\u8bbe\u5907\u4e0a\uff0c\u6216\u8005\u88ab\u7528\u4e8e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e960px\u7684\u8bbe\u5907\u4e0a\uff0c\u5982\u4e0b\u6240\u793a<\/p>\n\n\n\n

<linkrel=”stylesheet” type=”text\/css” href=”style.css” media=”handheld and (max-width:480px), screen and (min-width:960px)” \/><\/p>\n\n\n\n

\u4e0a\u9762\u4ee3\u7801\u4e2dstyle.css\u6837\u5f0f\u88ab\u7528\u5728\u5bbd\u5ea6\u5c0f\u4e8e\u6216\u7b49\u4e8e480px\u7684\u624b\u6301\u8bbe\u5907\u4e0a\uff0c\u6216\u8005\u88ab\u7528\u4e8e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e960px\u7684\u8bbe\u5907\u4e0a\u3002\u4e5f<\/p>\n\n\n\n

demo3<\/strong>\uff1a\u6ce8\u610f\u56e0\u4e3a<style>\u6807\u7b7e\u4e2d\u540e\u9762\u7684\u6837\u5f0f\u4f1a\u8986\u76d6\u524d\u9762\u7684\u6837\u5f0f\uff0c\u6240\u4ee5\u8981\u6ce8\u610f\u4e0d\u80fd\u987a\u5e8f\u9519\u8bef\uff0c\u5982\u4e0b\u4f1a\u5bfc\u81f4\u4e0d\u80fd\u5b9e\u73b0\u6839\u636e\u4e0d\u540c\u5c3a\u5bf8\u67e5\u8be2\u6e32\u67d3\uff0c\u5982\u4e0b\u6240\u793a<\/p>\n\n\n\n

@media (min-width: 992px){ \/\/>=992\u7684\u8bbe\u5907 }<\/p>\n\n\n\n

@media (min-width: 768px){ \/\/>=768\u7684\u8bbe\u5907 }<\/p>\n\n\n\n

demo4<\/strong>\uff1a\u5b9e\u73b0\u6a2a\u5c4f\u548c\u7ad6\u5c4f\u7684\u5a92\u4f53\u67e5\u8be2<\/p>\n\n\n\n

\/* \u7ad6\u5c4f *\/<\/p>\n\n\n\n

@media screen and (orientation: portrait) and (max-width: 720px) { \u5bf9\u5e94\u6837\u5f0f }<\/p>\n\n\n\n

\/* \u6a2a\u5c4f *\/<\/p>\n\n\n\n

@media screen and (orientation: landscape) { \u5bf9\u5e94\u6837\u5f0f }<\/p>\n\n\n\n

@media\u5b9e\u8df5<\/strong><\/p>\n\n\n\n

\u5230\u76ee\u524d\u4e3a\u6b62\uff0cCSS3 Media Queries\u5f97\u5230\u4e86\u4f17\u591a\u6d4f\u89c8\u5668\u652f\u6301\uff0c\u9664\u4e86IE6-8\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u4e4b\u5916\uff0c\u5728\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\u90fd\u53ef\u4ee5\u5b8c\u7f8e\u652f\u6301\u3002\u8fd8\u6709\u4e00\u4e2a\u4e0e\u4f17\u4e0d\u540c\u7684\u662f\uff0cMedia Queries\u5728\u5176\u4ed6\u6d4f\u89c8\u5668\u4e2d\u4e0d\u8981\u50cf\u5176\u4ed6CSS3\u5c5e\u6027\u4e00\u6837\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e2d\u6dfb\u52a0\u524d\u7f00\u3002<\/p>\n\n\n\n

1\u3001\u517c\u5bb9\u4f4e\u7248\u672cIE\u6d4f\u89c8\u5668\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\u5f00\u53d1<\/strong><\/p>\n\n\n\n

\u6b65\u9aa41<\/strong>\u3001\u517c\u5bb9\u79fb\u52a8\u8bbe\u5907\u5c55\u793a\u6548\u679c\uff0c\u9700\u8981\u5728 <head> \u4e4b\u4e2d\u6dfb\u52a0 viewport \u5143\u6570\u636e\u6807\u7b7e\u3002<\/p>\n\n\n\n

\u5176\u4e2dwidth = device-width\u8868\u793a\u663e\u793a\u5bbd\u5ea6\u7b49\u4e8e\u5f53\u524d\u8bbe\u5907\u7684\u5bbd\u5ea6\uff0cinitial-scale\u521d\u59cb\u7684\u7f29\u653e\u6bd4\u4f8b\uff08\u9ed8\u8ba4\u8bbe\u7f6e\u4e3a1.0\uff09\uff0cmaximum-scale\u5141\u8bb8\u7528\u6237\u7f29\u653e\u5230\u7684\u6700\u5927\u6bd4\u4f8b\uff08\u9ed8\u8ba4\u8bbe\u7f6e\u4e3a1.0\uff09 \uff0c  user-scalable\u7981\u6b62\u7528\u6237\u624b\u52a8\u7f29\u653e\u9875\u9762\uff08\u9ed8\u8ba4\u8bbe\u7f6e\u4e3ano\uff09\uff1b<\/p>\n\n\n\n

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”><\/p>\n\n\n\n

<meta name=”HandheldFriendly” content=”true”><\/p>\n\n\n\n

\u6b65\u9aa42<\/strong>\u3001\u52a0\u8f7d\u517c\u5bb9\u6027\u6587\u4ef6<\/p>\n\n\n\n

\u56e0\u4e3aIE8\u65e2\u4e0d\u652f\u6301HTML5\u4e5f\u4e0d\u652f\u6301CSS3 Media\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u52a0\u8f7d\u4e24\u4e2aJS\u6587\u4ef6\uff0c\u6765\u4fdd\u8bc1\u6211\u4eec\u7684\u4ee3\u7801\u5b9e\u73b0\u517c\u5bb9\u6548\u679c\uff1b\u5176\u4e2dRespond.js \u4e3a IE6-8 \u4ee5\u53ca\u5176\u5b83\u4e0d\u652f\u6301 CSS3 Media Queries \u7684\u6d4f\u89c8\u5668\u63d0\u4f9b\u5a92\u4f53\u67e5\u8be2\u7684 min-width \u548c max-width \u7279\u6027\uff0c\u5b9e\u73b0\u54cd\u5e94\u5f0f\u7f51\u9875\u8bbe\u8ba1\uff08Responsive Web Design\uff09\u3002html5shiv.js\u4f7fie9\u4ee5\u4e0b\u6d4f\u89c8\u5668\u80fd\u8bc6\u522bhtml5\u65b0\u589e\u6807\u7b7e\u3002<\/p>\n\n\n\n

<!–[if lt IE 9]><\/p>\n\n\n\n

  <script src=”https:\/\/oss.maxcdn.com\/libs\/html5shiv\/3.7.0\/html5shiv.js<\/a>“><\/script><\/p>\n\n\n\n

  <script src=”https:\/\/oss.maxcdn.com\/libs\/respond.js\/1.3.0\/respond.min.js<\/a>“><\/script><\/p>\n\n\n\n

<![endif]–><\/p>\n\n\n\n

\u4e3a\u63d0\u4f9b\u8de8\u6d4f\u89c8\u5668\u7684\u9ad8\u5ea6\u4e00\u81f4\u6027\uff0c\u6211\u4eec\u8fd8\u53ef\u4ee5\u52a0\u8f7dNormalize.css\uff0c\u5df2\u88ab\u7528\u4e8eTwitter Bootstrap\uff0cHTML5 Boilerplate\uff0cGOV.UK\uff0cRdio\uff0cCSS Tricks\u4ee5\u53ca\u8bb8\u8bb8\u591a\u591a\u5176\u4ed6\u7684\u6846\u67b6\uff0c\u5de5\u5177\u548c\u7f51\u7ad9\u4e0a\u3002normalize.css\u4e0b\u8f7d<\/p>\n\n\n\n

\u6b65\u9aa43<\/strong>\u3001\u8bbe\u7f6eIE\u6e32\u67d3\u65b9\u5f0f\u9ed8\u8ba4\u4e3a\u6700\u9ad8(\u8fd9\u90e8\u5206\u53ef\u4ee5\u9009\u62e9\u6dfb\u52a0\u4e5f\u53ef\u4ee5\u4e0d\u6dfb\u52a0)<\/p>\n\n\n\n

\u73b0\u5728\u6709\u5f88\u591a\u4eba\u7684IE\u6d4f\u89c8\u5668\u90fd\u5347\u7ea7\u5230IE9\u4ee5\u4e0a\u4e86\uff0c\u6240\u4ee5\u8fd9\u4e2a\u65f6\u5019\u5c31\u6709\u53c8\u5f88\u591a\u8be1\u5f02\u7684\u4e8b\u60c5\u53d1\u751f\u4e86\uff0c\u4f8b\u5982\u73b0\u5728\u662fIE9\u7684\u6d4f\u89c8\u5668\uff0c\u4f46\u662f\u6d4f\u89c8\u5668\u7684\u6587\u6863\u6a21\u5f0f\u5374\u8bbe\u7f6e\u662fIE8\u3002\u4e3a\u4e86\u9632\u6b62\u8fd9\u79cd\u60c5\u51b5\uff0c\u6211\u4eec\u9700\u8981\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u6765\u8ba9IE\u7684\u6587\u6863\u6a21\u5f0f\u6c38\u8fdc\u90fd\u662f\u6700\u65b0\u7684\uff1a<\/p>\n\n\n\n

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><\/p>\n\n\n\n

\uff08\u5982\u679c\u60f3\u6307\u5b9a\u4f7f\u7528IE\u7248\u672c\uff0c\u53ef\u5199\u6210\uff1a<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE9″>\uff09<\/p>\n\n\n\n

\u4e00\u4e2a\u66f4\u7ed9\u529b\u7684\u5199\u6cd5\uff1a<\/p>\n\n\n\n

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge\uff0cchrome=1″><\/p>\n\n\n\n

\u600e\u4e48\u8fd9\u6bb5\u4ee3\u7801\u540e\u9762\u52a0\u4e86\u4e00\u4e2achrome=1\uff0c\u8fd9\u4e2aGoogle Chrome Frame\uff08\u8c37\u6b4c\u5185\u5d4c\u6d4f\u89c8\u5668\u6846\u67b6GCF\uff09\uff0c\u5982\u679c\u6709\u7684\u7528\u6237\u7535\u8111\u91cc\u9762\u88c5\u4e86\u8fd9\u4e2achrome\u7684\u63d2\u4ef6\uff0c\u5c31\u53ef\u4ee5\u8ba9\u7535\u8111\u91cc\u9762\u7684IE\u4e0d\u7ba1\u662f\u54ea\u4e2a\u7248\u672c\u7684\u90fd\u53ef\u4ee5\u4f7f\u7528Webkit\u5f15\u64ce\u53caV8\u5f15\u64ce\u8fdb\u884c\u6392\u7248\u53ca\u8fd0\u7b97\uff0c\u65e0\u6bd4\u7ed9\u529b\uff0c\u4e0d\u8fc7\u5982\u679c\u7528\u6237\u6ca1\u88c5\u8fd9\u4e2a\u63d2\u4ef6\uff0c\u90a3\u8fd9\u6bb5\u4ee3\u7801\u5c31\u4f1a\u8ba9IE\u4ee5\u6700\u9ad8\u7684\u6587\u6863\u6a21\u5f0f\u5c55\u73b0\u6548\u679c\u3002\u8fd9\u6bb5\u4ee3\u7801\u6211\u8fd8\u662f\u5efa\u8bae\u4f60\u4eec\u7528\u4e0a\uff0c\u4e0d\u8fc7\u4e0d\u7528\u4e5f\u662f\u53ef\u4ee5\u7684\u3002<\/p>\n\n\n\n

\u6b65\u9aa44<\/strong>\u3001\u54cd\u5e94\u5f0f\u5e03\u5c40\u5f00\u53d1\uff08\u5a92\u4f53\u67e5\u8be2\u6765\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f\u3001\u4f7f\u7528\u54cd\u5e94\u5f0f\u5b57\u4f53rem\u5355\u4f4d\u3001\u56fe\u7247\u81ea\u9002\u5e94\u5904\u7406\uff09<\/p>\n\n\n\n

\u5728\u521b\u5efa\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u65f6\u5019\u4e60\u60ef\u5148\u5199\u975e\u54cd\u5e94\u5f0f\u5e03\u5c40\uff0c\u9875\u9762\u56fa\u5b9a\u5bbd\u5ea6\u5927\u5c0f\uff0c\u6211\u89c9\u5f97\u8fd9\u4e2a\u5bf9\u5728\u5ea7\u7684\u5404\u4f4d\u6ca1\u6709\u4efb\u4f55\u96be\u5ea6\u3002\u5982\u679c\u5b8c\u6210\u4e86\u975e\u54cd\u5e94\u5f0f\u90a3\u4e48\u6211\u5728\u53bb\u6dfb\u52a0\u5a92\u4f53\u67e5\u8be2\uff08Media Query)\u548c\u54cd\u5e94\u5f0f\u4ee3\u7801\u3002\u8fd9\u79cd\u64cd\u4f5c\u66f4\u5bb9\u6613\u5b9e\u73b0\u54cd\u5e94\u5f0f\u7279\u6027\u3002<\/p>\n\n\n\n

\/\/ \u5a92\u4f53\u67e5\u8be2\u6765\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/p>\n\n\n\n

\u5e94\u7528\u4e8e\u8d85\u5927\u5c4f\u663e\u793a\u5668\u4e0b\u7684\u6837\u5f0f,\u52a0\u5165\u4e00\u4e2a\u7ec8\u7aef\u7684\u5206\u8fa8\u7387\u5927\u4e8e1920px\uff0c\u8fd9\u91cc\u7684\u6837\u5f0f\u5c06\u8986\u76d6\u4e4b\u524d\u6240\u5b9a\u4e49\u7684\u6837\u5f0f<\/p>\n\n\n\n

@media screen and (min-width:1920px){<\/p>\n\n\n\n

     #head {  }<\/p>\n\n\n\n

     #content { }<\/p>\n\n\n\n

     #footer {  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

\/\/ \u56fe\u7247\u62c9\u4f38\u81ea\u9002\u5e94\u4f7f\u7528max-width<\/p>\n\n\n\n

#wrap img{<\/p>\n\n\n\n

    max-width:100%;<\/p>\n\n\n\n

    height:auto;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

\u4e0a\u8ff0\u4ee3\u7801\u4e2dID\u4e3awrap\u5185\u7684\u56fe\u7247\u4f1a\u6839\u636ewrap\u7684\u5bbd\u5ea6\u6539\u53d8\u5df2\u8fbe\u5230\u7b49\u5bbd\u6269\u5145\uff0cheight\u4e3aauto\u7684\u8bbe\u7f6e\u662f\u4e3a\u4e86\u4fdd\u8bc1\u56fe\u7247\u539f\u59cb\u7684\u9ad8\u5bbd\u6bd4\u4f8b\uff0c\u4ee5\u81f3\u4e8e\u56fe\u7247\u4e0d\u4f1a\u5931\u771f\u3002<\/p>\n\n\n\n

\/\/ \u80cc\u666f\u56fe\u7247\u62c9\u4f38\u81ea\u9002\u5e94\u4f7f\u7528CSS3\u7684background-size<\/p>\n\n\n\n

#log a{display:block;<\/p>\n\n\n\n

        width:100%;<\/p>\n\n\n\n

        height:40px;<\/p>\n\n\n\n

        text-indent:55rem;<\/p>\n\n\n\n

        background-img:url(logo.png);<\/p>\n\n\n\n

        background-repeat:no-repeat;<\/p>\n\n\n\n

        background-size:100% 100%;<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

background-size\u662fcss3\u7684\u65b0\u5c5e\u6027\uff0c\u7528\u4e8e\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\uff0c\u6709\u4e24\u4e2a\u53ef\u9009\u503c\uff0c<\/p>\n\n\n\n

\u7b2c\u4e00\u4e2a\u503c\u7528\u4e8e\u6307\u5b9a\u80cc\u666f\u56fe\u7684width,\u7b2c2\u4e2a\u503c\u7528\u4e8e\u6307\u5b9a\u80cc\u666f\u56fe\u7684height,\u5982\u679c\u53ea\u6307\u5b9a\u4e00\u4e2a\u503c\uff0c\u90a3\u4e48\u53e6\u4e00\u4e2a\u503c\u9ed8\u8ba4\u4e3aauto\u3002<\/p>\n\n\n\n

background-size:cover; \u7b49\u6bd4\u6269\u5c55\u56fe\u7247\u6765\u586b\u6ee1\u5143\u7d20<\/p>\n\n\n\n

background-size:contain; \u7b49\u6bd4\u7f29\u5c0f\u56fe\u7247\u6765\u9002\u5e94\u5143\u7d20\u7684\u5c3a\u5bf8<\/p>\n\n\n\n

2\u3001\u524d\u7aefbootstrap\u54cd\u5e94\u5f0f\u6846\u67b6<\/strong><\/p>\n\n\n\n

bootstrap\u6805\u683c\u7cfb\u7edf\u8be6\u89e3\uff1ahttps:\/\/v3.bootcss.com\/css\/#grid<\/a><\/p>\n\n\n\n

bootstrap\u6805\u683c\u7cfb\u7edf\u7b80\u4ecb<\/p>\n\n\n\n

Bootstrap \u63d0\u4f9b\u4e86\u4e00\u5957\u54cd\u5e94\u5f0f\u3001\u79fb\u52a8\u8bbe\u5907\u4f18\u5148\u7684\u6d41\u5f0f\u6805\u683c\u7cfb\u7edf\uff0c\u968f\u7740\u5c4f\u5e55\u6216\u89c6\u53e3\uff08viewport\uff09\u5c3a\u5bf8\u7684\u589e\u52a0\uff0c\u7cfb\u7edf\u4f1a\u81ea\u52a8\u5206\u4e3a\u6700\u591a12\u5217\u3002\u5b83\u5305\u542b\u4e86\u6613\u4e8e\u4f7f\u7528\u7684\u9884\u5b9a\u4e49\u7c7b\uff0c\u8fd8\u6709\u5f3a\u5927\u7684minxin \u7528\u4e8e\u751f\u6210\u66f4\u5177\u8bed\u4e49\u7684\u5e03\u5c40\u3002\u6805\u683c\u7cfb\u7edf\u7528\u4e8e\u901a\u8fc7\u4e00\u7cfb\u5217\u7684\u884c\uff08row\uff09\u4e0e\u5217\uff08column\uff09\u7684\u7ec4\u5408\u6765\u521b\u5efa\u9875\u9762\u5e03\u5c40\uff0c\u4f60\u7684\u5185\u5bb9\u5c31\u53ef\u4ee5\u653e\u5165\u8fd9\u4e9b\u521b\u5efa\u597d\u7684\u5e03\u5c40\u4e2d\u3002\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e00\u4e0b Bootstrap \u6805\u683c\u7cfb\u7edf\u7684\u5de5\u4f5c\u539f\u7406\uff1a<\/p>\n\n\n\n

\u201c\u884c\uff08row\uff09\u201d\u5fc5\u987b\u5305\u542b\u5728 .container \uff08\u56fa\u5b9a\u5bbd\u5ea6\uff09\u6216 .container-fluid \uff08100% \u5bbd\u5ea6\uff09\u4e2d\uff0c\u4ee5\u4fbf\u4e3a\u5176\u8d4b\u4e88\u5408\u9002\u7684\u6392\u5217\uff08aligment\uff09\u548c\u5185\u8865\uff08padding\uff09\u3002<\/p>\n\n\n\n

\u901a\u8fc7\u201c\u884c\uff08row\uff09\u201d\u5728\u6c34\u5e73\u65b9\u5411\u521b\u5efa\u4e00\u7ec4\u201c\u5217\uff08column\uff09\u201d\u3002<\/p>\n\n\n\n

\u4f60\u7684\u5185\u5bb9\u5e94\u5f53\u653e\u7f6e\u4e8e\u201c\u5217\uff08column\uff09\u201d\u5185\uff0c\u5e76\u4e14\uff0c\u53ea\u6709\u201c\u5217\uff08column\uff09\u201d\u53ef\u4ee5\u4f5c\u4e3a\u884c\uff08row\uff09\u201d\u7684\u76f4\u63a5\u5b50\u5143\u7d20\u3002<\/p>\n\n\n\n

\u7c7b\u4f3c .row \u548c .col-xs-4 \u8fd9\u79cd\u9884\u5b9a\u4e49\u7684\u7c7b\uff0c\u53ef\u4ee5\u7528\u6765\u5feb\u901f\u521b\u5efa\u6805\u683c\u5e03\u5c40\u3002Bootstrap \u6e90\u7801\u4e2d\u5b9a\u4e49\u7684 mixin \u4e5f\u53ef\u4ee5\u7528\u6765\u521b\u5efa\u8bed\u4e49\u5316\u7684\u5e03\u5c40\u3002<\/p>\n\n\n\n

\u901a\u8fc7\u4e3a\u201c\u5217\uff08column\uff09\u201d\u8bbe\u7f6e padding \u5c5e\u6027\uff0c\u4ece\u800c\u521b\u5efa\u5217\u4e0e\u5217\u4e4b\u95f4\u7684\u95f4\u9694\uff08gutter\uff09\u3002\u901a\u8fc7\u4e3a .row \u5143\u7d20\u8bbe\u7f6e\u8d1f\u503c margin \u4ece\u800c\u62b5\u6d88\u6389\u4e3a .container \u5143\u7d20\u8bbe\u7f6e\u7684 padding\uff0c\u4e5f\u5c31\u95f4\u63a5\u4e3a\u201c\u884c\uff08row\uff09\u201d\u6240\u5305\u542b\u7684\u201c\u5217\uff08column\uff09\u201d\u62b5\u6d88\u6389\u4e86padding\u3002<\/p>\n\n\n\n

\u8d1f\u503c\u7684 margin\u5c31\u662f\u4e0b\u9762\u7684\u793a\u4f8b\u4e3a\u4ec0\u4e48\u662f\u5411\u5916\u7a81\u51fa\u7684\u539f\u56e0\u3002\u5728\u6805\u683c\u5217\u4e2d\u7684\u5185\u5bb9\u6392\u6210\u4e00\u884c\u3002<\/p>\n\n\n\n

\u6805\u683c\u7cfb\u7edf\u4e2d\u7684\u5217\u662f\u901a\u8fc7\u6307\u5b9a1\u523012\u7684\u503c\u6765\u8868\u793a\u5176\u8de8\u8d8a\u7684\u8303\u56f4\u3002\u4f8b\u5982\uff0c\u4e09\u4e2a\u7b49\u5bbd\u7684\u5217\u53ef\u4ee5\u4f7f\u7528\u4e09\u4e2a .col-xs-4 \u6765\u521b\u5efa\u3002<\/p>\n\n\n\n

\u5982\u679c\u4e00\u201c\u884c\uff08row\uff09\u201d\u4e2d\u5305\u542b\u4e86\u7684\u201c\u5217\uff08column\uff09\u201d\u5927\u4e8e 12\uff0c\u591a\u4f59\u7684\u201c\u5217\uff08column\uff09\u201d\u6240\u5728\u7684\u5143\u7d20\u5c06\u88ab\u4f5c\u4e3a\u4e00\u4e2a\u6574\u4f53\u53e6\u8d77\u4e00\u884c\u6392\u5217\u3002<\/p>\n\n\n\n

\u6805\u683c\u7c7b\u9002\u7528\u4e8e\u4e0e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e\u5206\u754c\u70b9\u5927\u5c0f\u7684\u8bbe\u5907 \uff0c \u5e76\u4e14\u9488\u5bf9\u5c0f\u5c4f\u5e55\u8bbe\u5907\u8986\u76d6\u6805\u683c\u7c7b\u3002 \u56e0\u6b64\uff0c\u5728\u5143\u7d20\u4e0a\u5e94\u7528\u4efb\u4f55 .col-md-*\u6805\u683c\u7c7b\u9002\u7528\u4e8e\u4e0e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e\u5206\u754c\u70b9\u5927\u5c0f\u7684\u8bbe\u5907 \uff0c \u5e76\u4e14\u9488\u5bf9\u5c0f\u5c4f\u5e55\u8bbe\u5907\u8986\u76d6\u6805\u683c\u7c7b\u3002 \u56e0\u6b64\uff0c\u5728\u5143\u7d20\u4e0a\u5e94\u7528\u4efb\u4f55 .col-lg-*\u4e0d\u5b58\u5728\uff0c \u4e5f\u5f71\u54cd\u5927\u5c4f\u5e55\u8bbe\u5907\u3002<\/p>\n\n\n\n

\u5728\u6805\u683c\u7cfb\u7edf\u4e2d\uff0c\u6211\u4eec\u5728 Less \u6587\u4ef6\u4e2d\u4f7f\u7528\u4ee5\u4e0b\u5a92\u4f53\u67e5\u8be2\uff08media query\uff09\u6765\u521b\u5efa\u5173\u952e\u7684\u5206\u754c\u70b9\u9608\u503c\u3002<\/p>\n\n\n\n

\/* \u8d85\u5c0f\u5c4f\u5e55\uff08\u624b\u673a\uff0c\u5c0f\u4e8e 768px\uff09 *\/<\/p>\n\n\n\n

\/* \u6ca1\u6709\u4efb\u4f55\u5a92\u4f53\u67e5\u8be2\u76f8\u5173\u7684\u4ee3\u7801\uff0c\u56e0\u4e3a\u8fd9\u5728 Bootstrap \u4e2d\u662f\u9ed8\u8ba4\u7684\uff08\u8fd8\u8bb0\u5f97 Bootstrap \u662f\u79fb\u52a8\u8bbe\u5907\u4f18\u5148\u7684\u5417\uff1f\uff09 *\/<\/p>\n\n\n\n

\/* \u5c0f\u5c4f\u5e55\uff08\u5e73\u677f\uff0c\u5927\u4e8e\u7b49\u4e8e 768px\uff09 *\/<\/p>\n\n\n\n

@media (min-width: @screen-sm-min) { … }<\/p>\n\n\n\n

\/* \u4e2d\u7b49\u5c4f\u5e55\uff08\u684c\u9762\u663e\u793a\u5668\uff0c\u5927\u4e8e\u7b49\u4e8e 992px\uff09 *\/<\/p>\n\n\n\n

@media (min-width: @screen-md-min) { … }<\/p>\n\n\n\n

\/* \u5927\u5c4f\u5e55\uff08\u5927\u684c\u9762\u663e\u793a\u5668\uff0c\u5927\u4e8e\u7b49\u4e8e 1200px\uff09 *\/<\/p>\n\n\n\n

@media (min-width: @screen-lg-min) { … }<\/p>\n\n\n\n

\u53ef\u4ee5\u770b\u5230\u5728\u5176\u6805\u683c\u5e03\u5c40\u4e2d\u4e0d\u540c\u7684\u7c7b\u524d\u7f00\u4ee3\u8868\u7684\u662f\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u4e0b\u7684\u5e94\u7528<\/p>\n\n\n\n

    \u8d85\u5c0f\u5c4f\u5e55 \u624b\u673a (<768px)    \u5c0f\u5c4f\u5e55 \u5e73\u677f (\u2265768px)    \u4e2d\u7b49\u5c4f\u5e55 \u684c\u9762\u663e\u793a\u5668 (\u2265992px)    \u5927\u5c4f\u5e55 \u5927\u684c\u9762\u663e\u793a\u5668 (\u22651200px)<\/p>\n\n\n\n

\u6805\u683c\u7cfb\u7edf\u884c\u4e3a    \u603b\u662f\u6c34\u5e73\u6392\u5217    \u5f00\u59cb\u662f\u5806\u53e0\u5728\u4e00\u8d77\u7684\uff0c\u5f53\u5927\u4e8e\u8fd9\u4e9b\u9608\u503c\u65f6\u5c06\u53d8\u4e3a\u6c34\u5e73\u6392\u5217C<\/p>\n\n\n\n

.container \u6700\u5927\u5bbd\u5ea6    None \uff08\u81ea\u52a8\uff09    750px    970px    1170px<\/p>\n\n\n\n

\u7c7b\u524d\u7f00    .col-xs-    .col-sm-    .col-md-    .col-lg-<\/p>\n\n\n\n

\u6269\u5c55\u77e5\u8bc6\uff1a<\/strong><\/p>\n\n\n\n

1\u3001\u5355\u4f4dpixel-ratio\/dpi\/dppx\u533a\u522b?<\/strong><\/p>\n\n\n\n

   dpi \u5c5e\u6027\uff1a  \u6bcf\u82f1\u5bf8\u5305\u542b\u70b9\u7684\u6570\u91cf\uff08dots per inch\uff09<\/p>\n\n\n\n

   dppx \u5c5e\u6027:  \u6bcf\u50cf\u7d20\u5305\u542b\u70b9\u7684\u6570\u91cf\uff08dots per pixel\uff09\u3002<\/p>\n\n\n\n

   dpcm \u5c5e\u6027:  \u6bcf\u5398\u7c73\u5305\u542b\u70b9\u7684\u6570\u91cf\uff08dots per centimeter\uff09<\/p>\n\n\n\n

  \u6ce8\u610f\uff1a<\/p>\n\n\n\n

\u666e\u901a\u5c4f\u5e55\u901a\u5e38\u5305\u542b96dpi\uff0c\u4e00\u822c\u5c062\u500d\u4e8e\u6b64\u7684\u5c4f\u5e55\u79f0\u4e4b\u4e3a\u9ad8\u5206\u5c4f\uff0c\u5373\u5927\u4e8e\u7b49\u4e8e192dpi\u7684\u5c4f\u5e55\uff0c\u6bd4\u5982Mac\u89c6\u7f51\u819c\u5c4f\u5c31\u8fbe\u5230\u4e86192dpi\uff08\u53732dppx\uff09\uff0c\u6253\u5370\u65f6\u4e00\u822c\u4f1a\u9700\u8981\u66f4\u5927\u7684dpi\uff1b<\/p>\n\n\n\n

1dppx = 96dpi<\/p>\n\n\n\n

1dpi \u2248 0.39dpcm<\/p>\n\n\n\n

1dpcm \u2248 2.54dpi<\/p>\n\n\n\n

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px<\/p>\n\n\n\n

PS: \u56fe\u7247\u5728iphone\u4e2d\u6a21\u7cca\u7684\u539f\u56e0<\/p>\n\n\n\n

iphone \u7684\u7269\u7406\u5206\u8fa8\u7387\u662f 320X480\uff0c\u4f46\u662f\u5448\u73b0\u7684\u5185\u5bb9\u5374\u662f 640\u00d7960\uff0c\u4f46\u5176\u5b9e\u6211\u4eec\u8bbe\u7f6e\u7684 css px \u662f\u76f8\u5bf9\u4e8e\u7269\u7406\u5206\u8fa8\u7387\u7684\uff0c\u5373 320\u00d7480\uff0c\u4f46\u662f\u56e0\u4e3a\u6211\u4eec\u8bbe\u7f6e\u7684 css px \u8981\u663e\u793a\u5728\u66f4\u5bbd\u9614\u7684 640\u00d7960 \u7684\u5185\u5bb9\u533a\u57df\u91cc\u5934\uff0c\u6240\u4ee510\u4e2a css px \u5728 640\u00d7960 \u7684\u5448\u73b0\u6548\u679c\u5c31\u76f8\u5f53\u4e8e5\u4e2a device px \u5728 320\u00d7480 \u7684\u5448\u73b0\u6548\u679c\u3002<\/p>\n\n\n\n

\u6240\u4ee5\u5982\u679c\u56fe\u7247\u5f97\u5927\u5c0f\u662f100\u00d7100\uff0c\u90a3\u4e48\u5230iphone\u91cc\u5934\u5c31\u4f1a\u88ab\u653e\u59272\u500d\uff0c\u4e8e\u662f\u56fe\u50cf\u4f1a\u53d8\u5f97\u6bd4\u4ee5\u524d\u6a21\u7cca\uff0c\u901a\u5e38\u5f97\u89e3\u51b3\u529e\u6cd5\u662f\uff0c\u7528 background-size \u8bbe\u7f6e\u4e3a50%\uff0c\u4ee5\u524d\u7684\u4e00\u534a\uff0c\u7136\u540e\u518d\u5728 iphone \u653e\u59272\u500d\uff0c\u7b49\u4e8e\u6ca1\u53d8\u5316\uff0c\u6062\u590d\u5230\u6b63\u5e38\u6548\u679c\uff0c\u4e0d\u6a21\u7cca\u4e86\u3002<\/p>\n\n\n\n

2\u3001PC\u7aef\u6309\u5c4f\u5e55\u5c3a\u5bf8\u6574\u7406<\/strong><\/p>\n\n\n\n

\u5206\u8fa8\u7387   \u6bd4\u4f8b | \u8bbe\u5907\u5c3a\u5bf8<\/p>\n\n\n\n

1024*500 \uff088.9\u5bf8\uff09<\/p>\n\n\n\n

1024*768 \uff08\u6bd4\u4f8b4\uff1a3  | 10.4\u5bf8\u300112.1\u5bf8\u300114.1\u5bf8\u300115\u5bf8; \uff09<\/p>\n\n\n\n

1280*800\uff0816\uff1a10  |15.4\u5bf8\uff09<\/p>\n\n\n\n

1280*1024(\u6bd4\u4f8b\uff1a5\uff1a4  | 14.1\u5bf8\u300115.0\u5bf8)<\/p>\n\n\n\n

1280*854(\u6bd4\u4f8b\uff1a15\uff1a10 | 15.2\uff09<\/p>\n\n\n\n

1366*768 (\u6bd4\u4f8b\uff1a16\uff1a9 | \u4e0d\u5e38\u89c1\uff09<\/p>\n\n\n\n

1440*900 \uff0816\uff1a10  17\u5bf8 \u4ec5\u82f9\u679c\u7528\uff09<\/p>\n\n\n\n

1440*1050\uff08\u6bd4\u4f8b\uff1a5\uff1a4  | 14.1\u5bf8\u300115.0\u5bf8\uff09<\/p>\n\n\n\n

1600*1024\uff0814\uff1a9  \u4e0d\u5e38\u89c1\uff09<\/p>\n\n\n\n

1600*1200 \uff084\uff1a3 | 15\u300116.1\uff09<\/p>\n\n\n\n

1680*1050\uff0816\uff1a10 | 15.4\u5bf8\u300120.0\u5bf8\uff09<\/p>\n\n\n\n

1920*1200 (23\u5bf8\uff09<\/p>\n\n\n\n

\u901a\u8fc7\u4e0a\u9762\u7684\u7535\u8111\u5c4f\u853d\u53ca\u5c3a\u5bf8\u7684\u4f8b\u8868\u4e0a\u6211\u4eec\u5f97\u5230\u4e86\u51e0\u4e2a\u5bbd\u5ea6<\/p>\n\n\n\n

1024  1280  1366  1440  1680  1920  <\/p>\n\n\n\n

CSS\u4ee3\u7801<\/p>\n\n\n\n

@media (min-width: 1024px){<\/p>\n\n\n\n

  body{font-size: 18px}<\/p>\n\n\n\n

} \/*>=1024\u7684\u8bbe\u5907*\/<\/p>\n\n\n\n

@media (min-width: 1100px) {<\/p>\n\n\n\n

  body{font-size: 20px}<\/p>\n\n\n\n

} \/*>=1024\u7684\u8bbe\u5907*\/<\/p>\n\n\n\n

@media (min-width: 1280px) {<\/p>\n\n\n\n

  body{font-size: 22px;}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@media (min-width: 1366px) {<\/p>\n\n\n\n

  body{font-size: 24px;}<\/p>\n\n\n\n

}  <\/p>\n\n\n\n

@media (min-width: 1440px) {<\/p>\n\n\n\n

  body{font-size: 25px !important;}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@media (min-width: 1680px) {<\/p>\n\n\n\n

  body{font-size: 28px;}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@media (min-width: 1920px) {<\/p>\n\n\n\n

  body{font-size: 33px;}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

3\u3001 CSS\u4e2d<\/strong>\u76f8\u5bf9\u957f\u5ea6\u503c\u4ee3\u8868\u53e6\u4e00\u7c7b\u503c\uff0c\u5305\u62ec\uff1aREM\u3001 EM\u548c vw\/vh\u3002<\/strong><\/p>\n\n\n\n

\u76f8\u5bf9\u957f\u5ea6\u503c\u7684\u4f18\u52bf\u975e\u5e38\u660e\u663e\uff0c\u53ef\u4ee5\u7528\u5b83\u4eec\u6765\u6784\u5efa\u54cd\u5e94\u5f0f\u7f51\u7ad9\u3002\u5373\u7f51\u7ad9\u4f1a\u6839\u636e\u4f60\u7684\u8bbe\u5b9a\uff0c\u6709\u89c4\u5f8b\u5730\u81ea\u9002\u5e94\u5c4f\u5e55\u5927\u5c0f\u3002<\/p>\n\n\n\n

EM\u7684\u5927\u5c0f\u5b9a\u4e49\uff1a<\/strong><\/p>\n\n\n\n

\u5728\u5904\u7406font-size\u5c5e\u6027\u65f6\uff0c\u4e0e\u7236\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u6709\u5173\uff0c1em=\u7236\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0fpx\uff1b<\/p>\n\n\n\n

\u5728\u5904\u7406\u5176\u4ed6\u4e00\u4e9b\u5c5e\u6027\uff0c\u5982height\u65f6\uff0c\u4e0e\u5143\u7d20\u81ea\u8eab\u7684\u5b57\u4f53\u5927\u5c0f\u6709\u5173\uff0c1em=\u672c\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0fpx\u3002<\/p>\n\n\n\n

vw<\/strong> \u4ee3\u8868\u7a97\u53e3\u5bbd\u5ea6\u76841%\u3002 \u4e5f\u5c31\u662f\u8bf4\u5982\u679c\u4f60\u628awidth\u8bbe\u7f6e\u4e3a10vw\uff0c\u5143\u7d20\u5c31\u4f1a\u5360\u7a97\u53e310%\u7684\u5bbd\u5ea6\u3002<\/p>\n\n\n\n

vh<\/strong> \u4ee3\u8868\u7a97\u53e3\u9ad8\u5ea6\u76841%\u3002 \u4e5f\u5c31\u662f\u8bf4\u5982\u679c\u4f60\u628aheight\u8bbe\u7f6e\u4e3a10vh\uff0c\u5143\u7d20\u5c31\u4f1a\u5360\u7a97\u53e310%\u7684\u9ad8\u5ea6\u3002<\/p>\n\n\n\n

REM\u7684\u5927\u5c0f\u5b9a\u4e49\uff1a<\/strong><\/p>\n\n\n\n

css3\u5f15\u5165\u4e86\u65b0\u7684\u5355\u4f4d\u53eb\u505arem, \u548cem\u7c7b\u4f3c\u4f46\u5b83\u662f\u76f8\u5bf9\u4e8ehtml\u5143\u7d20\uff0crem\u66f4\u65b9\u4fbf\u4f7f\u7528\u3002rem\u662f\u76f8\u5bf9\u4e8e\u6839\u5143\u7d20\u7684\uff0c\u4e0d\u8981\u5fd8\u8bb0\u91cd\u7f6e\u6839\u5143\u7d20\u5b57\u4f53\u5927\u5c0f\uff08\u6d4f\u89c8\u5668\u9ed8\u8ba4\u5b57\u4f53\u5927\u5c0f\u4e3a16px\uff09\uff1a<\/p>\n\n\n\n

1rem=\u6839\u5143\u7d20\u5b57\u4f53\u5927\u5c0fpx\u3002<\/p>\n\n\n\n

html{font-size:625%;}  \u5373\u5b57\u4f53\u5927\u5c0f\u4e3a625%*16px=100px=1rem<\/p>\n\n\n\n

\u5b8c\u6210\u540e\uff0c\u4f60\u53ef\u4ee5\u5b9a\u4e49\u54cd\u5e94\u5f0f\u5b57\u4f53\uff1a<\/p>\n\n\n\n

@media (min-width:640px) { body{ font-size:0.12rem; }}  \u5373\u5b57\u4f53\u5927\u5c0f\u4e3a12px<\/p>\n\n\n\n

@media (min-width:960px) { body{ font-size:0.14rem;width:1.4rem; }}  \u5373\u5b57\u4f53\u5927\u5c0f\u4e3a14px\uff0c\u5bbd\u5ea6\u4e3a140px<\/p>\n\n\n\n

@media (min-width:1200px) { body{ font-size:0.16rem; }}<\/p>\n\n\n\n

4\u3001viewport<\/strong><\/p>\n\n\n\n

\u79fb\u52a8\u8bbe\u5907\u9ed8\u8ba4\u7684viewport\u662flayout viewport\uff0c\u4e5f\u5c31\u662f\u90a3\u4e2a\u6bd4\u5c4f\u5e55\u8981\u5bbd\u7684viewport\uff0c\u4f46\u5728\u8fdb\u884c\u79fb\u52a8\u8bbe\u5907\u7f51\u7ad9\u7684\u5f00\u53d1\u65f6\uff0c\u6211\u4eec\u9700\u8981\u7684\u662fideal viewport\u3002\u90a3\u4e48\u600e\u4e48\u624d\u80fd\u5f97\u5230ideal viewport\u5462\uff1f\u8fd9\u5c31\u8be5\u8f6e\u5230meta\u6807\u7b7e\u51fa\u573a\u4e86\u3002<\/p>\n\n\n\n

\u6211\u4eec\u5728\u5f00\u53d1\u79fb\u52a8\u8bbe\u5907\u7684\u7f51\u7ad9\u65f6\uff0c\u6700\u5e38\u89c1\u7684\u7684\u4e00\u4e2a\u52a8\u4f5c\u5c31\u662f\u628a\u4e0b\u9762\u8fd9\u4e2a\u4e1c\u897f\u590d\u5236\u5230\u6211\u4eec\u7684head\u6807\u7b7e\u4e2d\uff1a<\/p>\n\n\n\n

<metaname=”viewport”content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″><\/p>\n\n\n\n

\u8be5meta\u6807\u7b7e\u7684\u4f5c\u7528\u662f\u8ba9\u5f53\u524dviewport\u7684\u5bbd\u5ea6\u7b49\u4e8e\u8bbe\u5907\u7684\u5bbd\u5ea6\uff0c\u540c\u65f6\u4e0d\u5141\u8bb8\u7528\u6237\u624b\u52a8\u7f29\u653e\u3002\u4e5f\u8bb8\u5141\u4e0d\u5141\u8bb8\u7528\u6237\u7f29\u653e\u4e0d\u540c\u7684\u7f51\u7ad9\u6709\u4e0d\u540c\u7684\u8981\u6c42\uff0c\u4f46\u8ba9viewport\u7684\u5bbd\u5ea6\u7b49\u4e8e\u8bbe\u5907\u7684\u5bbd\u5ea6\uff0c\u8fd9\u4e2a\u5e94\u8be5\u662f\u5927\u5bb6\u90fd\u60f3\u8981\u7684\u6548\u679c\uff0c\u5982\u679c\u4f60\u4e0d\u8fd9\u6837\u7684\u8bbe\u5b9a\u7684\u8bdd\uff0c\u90a3\u5c31\u4f1a\u4f7f\u7528\u90a3\u4e2a\u6bd4\u5c4f\u5e55\u5bbd\u7684\u9ed8\u8ba4viewport\uff0c\u4e5f\u5c31\u662f\u8bf4\u4f1a\u51fa\u73b0\u6a2a\u5411\u6eda\u52a8\u6761\u3002<\/p>\n\n\n\n

\u8fd9\u4e2aname\u4e3aviewport\u7684meta\u6807\u7b7e\u5230\u5e95\u6709\u54ea\u4e9b\u4e1c\u897f\u5462\uff0c\u53c8\u90fd\u6709\u4ec0\u4e48\u4f5c\u7528\u5462\uff1f<\/p>\n\n\n\n

meta viewport \u6807\u7b7e\u9996\u5148\u662f\u7531\u82f9\u679c\u516c\u53f8\u5728\u5176safari\u6d4f\u89c8\u5668\u4e2d\u5f15\u5165\u7684\uff0c\u76ee\u7684\u5c31\u662f\u89e3\u51b3\u79fb\u52a8\u8bbe\u5907\u7684viewport\u95ee\u9898\u3002\u540e\u6765\u5b89\u5353\u4ee5\u53ca\u5404\u5927\u6d4f\u89c8\u5668\u5382\u5546\u4e5f\u90fd\u7eb7\u7eb7\u6548\u4eff\uff0c\u5f15\u5165\u5bf9meta viewport\u7684\u652f\u6301\uff0c\u4e8b\u5b9e\u4e5f\u8bc1\u660e\u8fd9\u4e2a\u4e1c\u897f\u8fd8\u662f\u975e\u5e38\u6709\u7528\u7684\u3002<\/p>\n\n\n\n

\u5728\u82f9\u679c\u7684\u89c4\u8303\u4e2d\uff0cmeta viewport \u67096\u4e2a\u5c5e\u6027(\u6682\u4e14\u628acontent\u4e2d\u7684\u90a3\u4e9b\u4e1c\u897f\u79f0\u4e3a\u4e00\u4e2a\u4e2a\u5c5e\u6027\u548c\u503c)\uff0c\u5982\u4e0b\uff1a<\/p>\n\n\n\n

width<\/td>\u8bbe\u7f6elayout viewport<\/em><\/strong>  \u7684\u5bbd\u5ea6\uff0c\u4e3a\u4e00\u4e2a\u6b63\u6574\u6570\uff0c\u6216\u5b57\u7b26\u4e32”width-device”<\/td><\/tr>
initial-scale<\/td>\u8bbe\u7f6e\u9875\u9762\u7684\u521d\u59cb\u7f29\u653e\u503c\uff0c\u4e3a\u4e00\u4e2a\u6570\u5b57\uff0c\u53ef\u4ee5\u5e26\u5c0f\u6570<\/td><\/tr>
minimum-scale<\/td>\u5141\u8bb8\u7528\u6237\u7684\u6700\u5c0f\u7f29\u653e\u503c\uff0c\u4e3a\u4e00\u4e2a\u6570\u5b57\uff0c\u53ef\u4ee5\u5e26\u5c0f\u6570<\/td><\/tr>
maximum-scale<\/td>\u5141\u8bb8\u7528\u6237\u7684\u6700\u5927\u7f29\u653e\u503c\uff0c\u4e3a\u4e00\u4e2a\u6570\u5b57\uff0c\u53ef\u4ee5\u5e26\u5c0f\u6570<\/td><\/tr>
height<\/td>\u8bbe\u7f6elayout viewport<\/em><\/strong>  \u7684\u9ad8\u5ea6\uff0c\u8fd9\u4e2a\u5c5e\u6027\u5bf9\u6211\u4eec\u5e76\u4e0d\u91cd\u8981\uff0c\u5f88\u5c11\u4f7f\u7528<\/td><\/tr>
user-scalable<\/td>\u662f\u5426\u5141\u8bb8\u7528\u6237\u8fdb\u884c\u7f29\u653e\uff0c\u503c\u4e3a”no”\u6216”yes”, no \u4ee3\u8868\u4e0d\u5141\u8bb8\uff0cyes\u4ee3\u8868\u5141\u8bb8<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u8fd9\u4e9b\u5c5e\u6027\u53ef\u4ee5\u540c\u65f6\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\u6216\u6df7\u5408\u4f7f\u7528\uff0c\u591a\u4e2a\u5c5e\u6027\u540c\u65f6\u4f7f\u7528\u65f6\u7528\u9017\u53f7\u9694\u5f00\u5c31\u884c\u4e86\u3002<\/p>\n\n\n\n

\u6b64\u5916\uff0c\u5728\u5b89\u5353\u4e2d\u8fd8\u652f\u6301 target-densitydpi \u8fd9\u4e2a\u79c1\u6709\u5c5e\u6027\uff0c\u5b83\u8868\u793a\u76ee\u6807\u8bbe\u5907\u7684\u5bc6\u5ea6\u7b49\u7ea7\uff0c\u4f5c\u7528\u662f\u51b3\u5b9acss\u4e2d\u76841px\u4ee3\u8868\u591a\u5c11\u7269\u7406\u50cf\u7d20<\/p>\n\n\n\n

target-densitydpi <\/td>\u503c\u53ef\u4ee5\u4e3a\u4e00\u4e2a\u6570\u503c\u6216 high-dpi \u3001 medium-dpi\u3001 low-dpi\u3001 device-dpi \u8fd9\u51e0\u4e2a\u5b57\u7b26\u4e32\u4e2d\u7684\u4e00\u4e2a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u7279\u522b\u8bf4\u660e\u7684\u662f\uff0c\u5f53 target-densitydpi=device-dpi \u65f6\uff0c css\u4e2d\u76841px\u4f1a\u7b49\u4e8e\u7269\u7406\u50cf\u7d20\u4e2d\u76841px\u3002<\/p>\n\n\n\n

\u56e0\u4e3a\u8fd9\u4e2a\u5c5e\u6027\u53ea\u6709\u5b89\u5353\u652f\u6301\uff0c\u5e76\u4e14\u5b89\u5353\u5df2\u7ecf\u51b3\u5b9a\u8981\u5e9f\u5f03\u00a0target-densitydpi<\/s>\u00a0\u8fd9\u4e2a\u5c5e\u6027\u4e86\uff0c\u6240\u4ee5\u8fd9\u4e2a\u5c5e\u6027\u6211\u4eec\u8981\u907f\u514d\u8fdb\u884c\u4f7f\u7528 \u3002<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

\u4e86\u89e3@Media\u76f8\u5173\uff1a 1\u3001\u4e86\u89e3Media Queries Media Queries\u80fd\u5728\u4e0d\u540c\u7684\u6761\u4ef6\u4e0b\u4f7f\u7528\u4e0d\u540c …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[919,922,918,921,920,549],"class_list":["post-1177","post","type-post","status-publish","format-standard","hentry","category-13","tag-media","tag-bootstrap","tag-css","tag-rem","tag-viewport","tag-549"],"views":862,"_links":{"self":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1177"}],"version-history":[{"count":1,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1177\/revisions"}],"predecessor-version":[{"id":1178,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1177\/revisions\/1178"}],"wp:attachment":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}