首页用html写一个pc与手机端自适应网页

用html写一个pc与手机端自适应网页

时间: 2023-09-24 11:11:41 浏览: 258

好的，以下是一个简单的示例代码，实现了PC和手机端的自适应网页： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应网页示例</title>  <style> body { width: 960px; /* PC端宽度 */ margin: 0 auto; /* 居中对齐 */ } </style>  <style> @media (max-width: 767px) { /* 定义移动端的屏幕宽度 */ body { width: 100%; /* 移动端宽度 */ padding: 10px; /* 内边距 */ } } </style> </head> <body> <h1>自适应网页示例</h1> <p>这是一个自适应的网页，可以在PC和移动设备上正常显示。</p> <img src="image.jpg" alt="图片" width="100%"> <p>其他内容...</p> </body> </html> ``` 这段代码中，我们使用了CSS媒体查询来区分不同的设备屏幕大小。当屏幕宽度小于等于767px时，应用移动端样式；反之，应用PC端样式。这样就可以实现PC和手机端的自适应。

阅读全文