想要使内根据屏幕大小自适应缩放，就要了解一个单位 rem ：相对于根元素大小单位。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @media screen and (min-width:1200px ) { html{font-size: 48px;} } @media screen and (min-width:800px ) and (max-width:1200px) { html{font-size: 24px;} } @media screen and (max-width:800px ) { html{font-size: 12px;} } .nav{ width: 10rem; height: 5rem; background: #009688; font-size: 1rem; color: #5FB878; } </style> </head> <body> <button class="nav">哈哈</button> </body> </html>
