var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of h(n))!N.call(a,l)&&l!==s&&c(a,l,{get:()=>n[l],enumerable:!(t=m(n,l))||t.enumerable});return a};var b=(a,n,s)=>(s=a!=null?d(u(a)):{},i(n||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>i(c({},"__esModule",{value:!0}),a);var o=k((j,r)=>{r.exports=_jsx_runtime});var w={};g(w,{default:()=>f,frontmatter:()=>x});var e=b(o()),x={title:"\u79FB\u52A8 Web \u5F00\u53D1",date:"2019-12-24T16:00:00.000Z",categories:["Front-End"],tags:["JavaScript","CSS","\u79FB\u52A8\u7AEF"],icon:"\u{1F4F1}"};function p(a){let n=Object.assign({ul:"ul",li:"li",code:"code",strong:"strong",h2:"h2",a:"a",h3:"h3",pre:"pre",span:"span",p:"p",blockquote:"blockquote",ol:"ol"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["\u8FD0\u884C\u5728\u624B\u673A\u7AEF\u7684 ",(0,e.jsx)(n.code,{children:"Web"})," \u9875\u9762\uFF08",(0,e.jsx)(n.code,{children:"H5"})," \u9875\u9762\uFF09"]}),` `,(0,e.jsx)(n.li,{children:"\u8DE8\u5E73\u53F0"}),` `,(0,e.jsxs)(n.li,{children:["\u57FA\u4E8E ",(0,e.jsx)(n.code,{children:"Webview"})]}),` `,(0,e.jsxs)(n.li,{children:["\u544A\u522B ",(0,e.jsx)(n.code,{children:"IE"})," \u62E5\u62B1 ",(0,e.jsx)(n.code,{children:"Webkit"})]}),` `,(0,e.jsxs)(n.li,{children:["\u66F4\u597D\u7684",(0,e.jsx)(n.strong,{children:"\u9002\u914D"}),"\u548C",(0,e.jsx)(n.strong,{children:"\u6027\u80FD"}),"\u8981\u6C42"]}),` `]}),` `,(0,e.jsx)(n.h2,{id:"\u5E38\u89C1\u79FB\u52A8-web-\u9002\u914D\u65B9\u6CD5",children:(0,e.jsx)(n.a,{href:"#\u5E38\u89C1\u79FB\u52A8-web-\u9002\u914D\u65B9\u6CD5",children:"\u5E38\u89C1\u79FB\u52A8 web \u9002\u914D\u65B9\u6CD5"})}),` `,(0,e.jsx)(n.h3,{id:"pc",children:(0,e.jsx)(n.a,{href:"#pc",children:"PC"})}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"960px / 1000px \u5C45\u4E2D"}),` `,(0,e.jsx)(n.li,{children:"\u76D2\u5B50\u6A21\u578B\uFF0C\u5B9A\u9AD8\uFF0C\u5B9A\u5BBD"}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:"display:inline-block"})}),` `]}),` `,(0,e.jsx)(n.h3,{id:"\u79FB\u52A8-web",children:(0,e.jsx)(n.a,{href:"#\u79FB\u52A8-web",children:"\u79FB\u52A8 web"})}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"\u5B9A\u9AD8\uFF0C\u5BBD\u5EA6\u767E\u5206\u6BD4"}),` `,(0,e.jsx)(n.li,{children:"Flex \u5E03\u5C40"}),` `,(0,e.jsx)(n.li,{children:"Media Query\uFF08\u5A92\u4F53\u67E5\u8BE2\uFF09"}),` `]}),` `,(0,e.jsx)(n.h2,{id:"media-query\u5A92\u4F53\u67E5\u8BE2",children:(0,e.jsx)(n.a,{href:"#media-query\u5A92\u4F53\u67E5\u8BE2",children:"Media Query\uFF08\u5A92\u4F53\u67E5\u8BE2\uFF09"})}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@media"})," \u5A92\u4F53\u7C7B\u578B ",(0,e.jsx)(n.span,{className:"token keyword",children:"and"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"\u5A92\u4F53\u7279\u6027",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"/*css\u6837\u5F0F*/"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u4E3E\u4E2A",(0,e.jsx)(n.a,{href:"/html/example/mobile-web-dev-example.html",children:"\u4F8B\u5B50"})]}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsxs)(n.span,{className:"token doctype",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"ie=edge",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Document",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"style"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:` `})})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".inner"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"10",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"text-align"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," center",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"11",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token color",children:"white"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"12",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"line-height"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"13",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"font-size"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"24"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"14",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"15",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:` `})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"16",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsxs)(n.span,{className:"token selector",children:[(0,e.jsx)(n.span,{className:"token class",children:".box"})," ",(0,e.jsx)(n.span,{className:"token class",children:".inner"}),(0,e.jsx)(n.span,{className:"token pseudo-class",children:":nth-child"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token n-th",children:(0,e.jsx)(n.span,{className:"token number",children:"2n"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"17",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"background"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token color",children:"palegreen"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"18",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"19",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:` `})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"20",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsxs)(n.span,{className:"token selector",children:[(0,e.jsx)(n.span,{className:"token class",children:".box"})," ",(0,e.jsx)(n.span,{className:"token class",children:".inner"}),(0,e.jsx)(n.span,{className:"token pseudo-class",children:":nth-child"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token n-th",children:[(0,e.jsx)(n.span,{className:"token number",children:"2n"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"21",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"background"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token color",children:"palevioletred"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"22",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"23",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:` `})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"24",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@media"})," screen ",(0,e.jsx)(n.span,{className:"token keyword",children:"and"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token property",children:"max-width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"320"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"25",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".inner"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"26",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"27",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"28",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"29",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:` `})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"30",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@media"})," screen ",(0,e.jsx)(n.span,{className:"token keyword",children:"and"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token property",children:"min-width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"321"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"31",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".inner"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"32",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"25"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"33",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"float"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," left",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"34",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"35",children:(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsxs)(n.span,{className:"token language-css",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"36",children:[(0,e.jsx)(n.span,{className:"token style",children:(0,e.jsx)(n.span,{className:"token language-css",children:" "})}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"37",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"38",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"39",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"40",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"box",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"41",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"inner",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"1",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"42",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"inner",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"2",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"43",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"inner",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"3",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"44",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"inner",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"4",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"45",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"46",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"47",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(n.h2,{id:"rem-\u5E03\u5C40",children:(0,e.jsx)(n.a,{href:"#rem-\u5E03\u5C40",children:"rem \u5E03\u5C40"})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"rem\uFF1Afont size of the root element"}),` `]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["\u5B57\u4F53\u5355\u4F4D\uFF1A\u503C\u6839\u636E ",(0,e.jsx)(n.code,{children:"html"})," \u6839\u5143\u7D20\u5927\u5C0F\u800C\u5B9A\uFF0C\u540C\u6837\u53EF\u4EE5\u4F5C\u4E3A\u5BBD\u5EA6\u9AD8\u5EA6\u7B49\u5355\u4F4D"]}),` `,(0,e.jsxs)(n.li,{children:["\u9002\u914D\u539F\u7406\uFF1A\u5C06",(0,e.jsx)(n.code,{children:" px"})," \u66FF\u6362\u6210 ",(0,e.jsx)(n.code,{children:"rem"}),"\uFF0C\u52A8\u6001\u4FEE\u6539 ",(0,e.jsx)(n.code,{children:"html"})," \u7684 ",(0,e.jsx)(n.code,{children:"font-size"})," \u9002\u914D"]}),` `,(0,e.jsxs)(n.li,{children:["\u517C\u5BB9\u6027\uFF1A",(0,e.jsx)(n.code,{children:"IOS 6"})," \u4EE5\u4E0A\u548C ",(0,e.jsx)(n.code,{children:"Android 2.1"})," \u4EE5\u4E0A\uFF0C\u57FA\u672C\u8986\u76D6\u6240\u6709\u6D41\u884C\u7684\u624B\u673A\u7CFB\u7EDF"]}),` `]}),` `,(0,e.jsx)(n.h3,{id:"\u4F7F\u7528\u6D41\u7A0B",children:(0,e.jsx)(n.a,{href:"#\u4F7F\u7528\u6D41\u7A0B",children:"\u4F7F\u7528\u6D41\u7A0B"})}),` `,(0,e.jsxs)(n.p,{children:["\u4F7F\u7528\u8BBE\u5907\uFF1A",(0,e.jsx)(n.code,{children:"iPhone 6/7/8"})]}),` `,(0,e.jsxs)(n.p,{children:["\u5207\u56FE\uFF1A",(0,e.jsx)(n.code,{children:"750px x 1334px \u4E24\u500D\u56FE"})]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:["\u4F7F\u7528 ",(0,e.jsx)(n.code,{children:"JS"})," \u52A8\u6001\u4FEE\u6539 ",(0,e.jsx)(n.code,{children:"html"})," \u7684 ",(0,e.jsx)(n.code,{children:"font-size"})]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setFontSize"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u5F97\u5230\u624B\u673A\u5C4F\u5E55\u7684\u5BBD\u5EA6"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"let"})," htmlWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"documentElement"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"clientWidth"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"body"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"clientWidth"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u5F97\u5230html\u7684Dom\u5143\u7D20"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"let"})," htmlDom ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"getElementsByTagName"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'html'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u8BBE\u7F6E\u6839\u5143\u7D20\u5B57\u4F53\u5927\u5C0F"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" htmlDom",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"style"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"fontSize"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," htmlWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"10"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'px'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{className:"token function",children:"setFontSize"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token dom variable",children:"window"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"addEventListener"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'resize'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"e"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setFontSize"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:["\u4F7F\u7528 ",(0,e.jsx)(n.code,{children:"scss"})," \u7F16\u5199 ",(0,e.jsx)(n.code,{children:"px"})," \u8F6C\u6362\u6210 ",(0,e.jsx)(n.code,{children:"rem"})," \u7684\u51FD\u6570"]}),` `,(0,e.jsx)(n.pre,{className:"language-scss",children:(0,e.jsxs)(n.code,{className:"language-scss code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"@function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"px2rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token variable",children:"$px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:(0,e.jsx)(n.span,{className:"token variable",children:"$rem"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," 37.5px",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"@return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token variable",children:"$px"}),"/",(0,e.jsx)(n.span,{className:"token variable",children:"$rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," rem",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsx)(n.p,{children:"\u6109\u5FEB\u7684\u7F16\u5199\u6837\u5F0F\u4EE3\u7801\u55BD"}),` `,(0,e.jsx)(n.pre,{className:"language-scss",children:(0,e.jsxs)(n.code,{className:"language-scss code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token selector",children:".box "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token function",children:"px2rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"100px",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"height"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token function",children:"px2rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"100px",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"font-size"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token function",children:"px2rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"24px",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `]}),` `]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"\u53C2\u8003\uFF1A"}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://www.imooc.com/learn/942",children:"\u79FB\u52A8 Web \u5F00\u53D1\u9002\u914D\u79D8\u7C4D Rem"})}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://juejin.im/post/5cddf289f265da038f77696c",children:"\u5173\u4E8E\u79FB\u52A8\u7AEF\u9002\u914D\uFF0C\u4F60\u5FC5\u987B\u8981\u77E5\u9053\u7684"})}),` `]})]})}function v(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var f=v;return y(w);})(); ;return Component;

Tag:CSS

CSS3伪类 :focus-visible 的应用

🎉9 周年页面回顾

CSS3一段很 Cool 的 CSS

📱移动 Web 开发

伪类 :focus-visible 的应用

一段很 Cool 的 CSS