用h't'm'l完成页面背景颜色随浏览器视口宽度变化而变化效果。完成页面背景颜色随浏览器视口宽度变化而变化效果。

可以使用CSS3中的渐变背景实现这个效果。具体步骤如下：

1. 在HTML文件中添加一个`<div>`元素，用于包裹页面内容。

2. 在CSS文件中设置`<div>`元素的背景颜色为线性渐变，其中起点颜色为红色，终点颜色为蓝色，方向为从左到右。

3. 使用CSS3中的媒体查询功能，在浏览器视口宽度小于某个值时，将渐变方向改为从上到下。

HTML代码：

<div class="container">
  <!-- 页面内容 -->
</div>

CSS代码：

.container {
  background: linear-gradient(to right, red, blue);
}

@media (max-width: 768px) {
  .container {
    background: linear-gradient(to bottom, red, blue);
  }
}

在上面的代码中，`@media`关键字表示媒体查询，`(max-width: 768px)`表示浏览器视口宽度小于768像素时，将应用媒体查询中的样式。

注意：以上代码仅为示例，实际使用时需要根据具体需求进行调整。