要使用CSS媒体查询和Javascript实现网页的自适应排版，可以按照以下步骤进行：

1. CSS媒体查询：
– 在CSS文件中添加@media规则，用于定义不同的屏幕尺寸范围和样式。
– 使用@media规则来调整布局和样式，以适应不同的屏幕尺寸。例如，可以设置不同的宽度、高度、字体大小等属性。
– 媒体查询可以基于屏幕宽度、高度、设备方向（横向或纵向）、设备像素比等条件进行调整样式。

2. Javascript：
– 使用Javascript可以根据屏幕尺寸动态修改元素属性和样式。
– 可以使用window对象的resize事件来监听窗口大小的变化。
– 在resize事件中，根据窗口大小的变化来修改元素的布局和样式。

下面是一个示例代码，展示了如何结合CSS媒体查询和Javascript实现网页的自适应排版：

“`html

<meta charset=”UTF-8″>

@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: lightgreen;
}
}

@media (min-width: 1201px) {
body {
background-color: lightyellow;
}
}

网页标题

<script>
// Javascript
window.addEventListener(‘resize’, function() {
var title = document.getElementById(‘title’);
var width = window.innerWidth;

if (width < 600) {
title.style.fontSize = ’20px’;
} else if (width >= 600 && width <= 1200) {
title.style.fontSize = ’30px’;
} else {
title.style.fontSize = ’40px’;
}
});
</script>

“`

在上述示例中，通过CSS的媒体查询来设置不同屏幕尺寸下的背景颜色，然后通过Javascript来动态修改标题的字体大小。在窗口大小变化时，监听resize事件，获取窗口的宽度，然后根据宽度的不同来修改标题的字体大小。

这只是一个简单的示例，可以根据具体需求进行调整和扩展。