Html 网页大小自适应手机屏幕

创建一个自适应大小的HTML页面,可以使用CSS的媒体查询(Media Queries)来根据屏幕宽度调整样式。以下是一个简单的例子,演示如何使用CSS Media Queries来实现自适应设计:

方法一:将下面代码放入 <head>和</head>之间。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

方法二:

<!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 {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .header {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 10px;
    margin: 15px;
  }

  @media (max-width: 768px) {
    .header, .content {
      padding: 5px;
      margin: 5px;
    }
  }
</style>
</head>
<body>

<div class="header">
  <h1>我的自适应网页</h1>
</div>

<div class="content">
  <p>这是一个自适应大小的网页,不论设备的屏幕尺寸如何变化,内容都会适当地调整布局和样式。</p>
</div>

</body>
</html>
赞(0) 打赏
未经允许不得转载:诚信网站 » Html 网页大小自适应手机屏幕

富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善

在线投稿邮箱投稿

打赏这个内容

遇见的都是缘分,让我们一起努力!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册