<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>媒体查询文字大小</title> <style type="text/css"> h1{ font-size: 20px; text-align: center; line-height: 200px; width: 200px; height: 200px; background: red; } @media only screen and (min- 400px) and (max- 640px) { h1{ font-size: 40px; text-align: center; line-height: 400px; width: 400px; height: 400px; background: pink; } } @media only screen and (min- 640px) and (max- 1000px){ h1{ font-size: 60px; text-align: center; line-height: 600px; width: 600px; height: 600px; background: yellow; } } </style> </head> <body> <h1>helloworld</h1> </body> </html>