首页写一个自适应网页大小的html代码

写一个自适应网页大小的html代码

时间: 2023-05-21 19:05:03 浏览: 663

<!DOCTYPE html> <html> <head> <title>自适应网页</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*设置最小宽度*/ body { min-width: 320px; } /*设置页面宽度为屏幕的百分之百*/ html, body { width: 100%; } /*设置页面字号*/ body { font-size: 16px; } /*设置页面背景颜色*/ body { background-color: #f2f2f2; } /*设置网页内容的宽度*/ .container { width: 80%; margin: 0 auto; } /*设置图片自动适应*/ img { max-width: 100%; height: auto; } </style> </head> <body> <div class="container"> <h1>这是一个自适应网页的标题</h1> <p>这是一段自适应网页的内容，它会根据你的屏幕大小自动调整布局。</p> <img src="example.jpg" alt="自适应图片"> </div> </body> </html>

阅读全文