以下是一个简单的自适应网页代码示例，使用了HTML、CSS中的一些常见技术，包括媒体查询、弹性盒子布局（Flexbox）等，以实现网页在不同屏幕尺寸下的自适应。

代码详细：

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

/* 头部样式 */
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

/* 导航栏样式 */
nav {
background-color: #555;
display: flex;
justify-content: space - around;
}

nav a {
color: white;
text-decoration: none;
padding: 15px;
}

/* 主要内容区域 */
main {
display: flex;
flex-wrap: wrap;
}

/* 文章部分 */
article {
flex: 2;
background-color: #f4f4f4;
margin: 10px;
padding: 20px;
}

/* 侧边栏部分 */
aside {
flex: 1;
background-color: #ddd;
margin: 10px;
padding: 20px;
}

/* 在较小屏幕下的布局调整 */
@media screen and (max - width: 768px) {
nav {
flex - direction: column;
}

article {
flex: 1;
}
}
</style>
</head>

<body>
<header>
<h1>自适应网页标题</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">联系我们</a>
</nav>
<main>
<article>
<h2>文章标题</h2>
<p>这是文章的内容部分，这里可以填充很多文字内容用于测试自适应效果。当屏幕尺寸发生变化时，文章和侧边栏的布局将相应地改变。</p>
</article>
<aside>
<h3>侧边栏标题</h3>
<p>这是侧边栏的内容，通常是一些补充信息。</p>
</aside>
</main>
</body>

</html>

在上述示例中：

1. HTML结构：

定义了一个基本的网页结构，包括头部（“header”）、导航栏（“nav”）、主要内容区域（“main”）包含文章（“article”）和侧边栏（“aside”）。

2. CSS样式：

在全局样式中设置了身体（“body”）的一些基本属性，如去除默认的外边距和内边距，并设置了字体。

头部（“header”）设置为深色背景，白色文字，居中显示。

导航栏（“nav”）采用弹性盒子布局（“display: flex”），子元素均匀分布（“justify - content: space - around”）。

主要内容区域（“main”）也使用弹性盒子布局（“display: flex”），并且子元素（文章和侧边栏）可以换行（“flex - wrap: wrap”）。

文章（“article”）和侧边栏（“aside”）按照不同的比例分配空间（“flex: 2”和“flex: 1”）。

通过媒体查询（“@media”），当屏幕宽度小于等于768px时，导航栏改为垂直布局（“flex - direction: column”），文章的弹性布局比例也调整为“flex: 1”，以适应小屏幕设备。

当然，这个示例仅仅是一个简单的起点，在实际的自适应网页开发中，可能需要使用更多更复杂的技术来处理各种设备和屏幕尺寸的差异。