首页html手机自适应代码

html手机自适应代码

时间: 2023-06-30 14:14:49 浏览: 87

以下是一个基本的HTML页面的手机自适应代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手机自适应页面</title> <style> /* 响应式布局 */ @media screen and (max-width: 600px) { /* 在设备宽度小于600px时应用的样式 */ body { font-size: 14px; } } /* 相对单位 */ .container { width: 80%; margin: 0 auto; font-size: 1.2rem; text-align: center; } /* Flexbox布局 */ .box { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 20px; } .box div { width: 30%; margin: 10px; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0 0 10px #ccc; } </style> </head> <body> <div class="container"> <h1>手机自适应页面</h1> <p>这是一个自适应页面的示例。</p> <div class="box"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> </body> </html> ``` 在上面的代码中，通过设置meta标签来设置视口大小，并使用@media媒体查询、相对单位、Flexbox布局等方法实现了页面的自适应。需要注意的是，以上代码只是一个基本示例，具体的样式规则需要根据实际需求进行调整。

阅读全文