<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style> *{ margin:0; padding:0 } html,body{ height:100%; } body{ display:flex; flex-direction: column; } html{ font-size:31.25vw; /*1rem == 100px*/ } header{ height:0.44rem; background:green; font-size:12px; } nav{ height:0.35rem; background:orange; } main{flex:1;} footer{ height:0.44rem; background:blue; } @media all and (min-321px) and (max-375px){ header{ font-size:16px; } footer{} } </style> </head> <body> <header>文本</header> <nav></nav> <main></main> <footer></footer> </body> </html> <!-- 100px == ?vw 设计图！！！！！ 640px 750px 1080px dpr: 2 2 3 例子1：如果设计图为640px; 考虑dpr 2 640px / 2 == 320px; 320px == 100vw; 3.2px == 1vw; 100px == 31.25vw; 具体实现：量出height:88px dpr 2 88px / 2 == 44px 44px / 100 == 0.44rem; 死记住！！： 如果设计图为640px 给html设置{font-size:31.25vw} 量出大小 76px 76 / dpr == 38px; 38px / 100 == 0.38rem; 例子：设计图为750px; 需求：100px == ?vw; dpr 2 750px / 2 == 375px 100vw == 375px; 1vw == 3.75px;; 26.67vw == 100px; 死记住！！！ 如果设计图为750px 给html设置{font-size:26.67vw} 量出大小54px 54px / 2 == 27px; 27px / 100 == 0.27rem -->