首页写一段屏幕自适应HTML代码，分为标题区域和内容区域

写一段屏幕自适应HTML代码，分为标题区域和内容区域

时间: 2024-03-03 12:48:19 浏览: 47

以下是一个简单的屏幕自适应的HTML代码，其中分为标题区域和内容区域，可以根据设备的屏幕大小自动调整布局。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自适应页面</title> <style> /* 标题区域 */ .header { text-align: center; font-size: 2em; padding: 20px; } /* 内容区域 */ .content { text-align: center; font-size: 1.5em; padding: 20px; } /* 屏幕宽度小于600px时调整样式 */ @media only screen and (max-width: 600px) { .header { font-size: 1.5em; padding: 10px; } .content { font-size: 1em; padding: 10px; } } </style> </head> <body> <div class="header">标题区域</div> <div class="content">内容区域</div> </body> </html> ``` 在上述代码中，我们使用了CSS中的@media规则，当屏幕宽度小于600px时，就会应用@media内部定义的样式，从而实现了自适应效果。