网页自动适应电脑和手机屏幕的关键在于响应式布局。以下是一些实现响应式布局的HTML和CSS方法：

1. 使用Viewport元标记

在标记中添加以下元标记：

“`
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
“`

该元标记告诉浏览器，在移动设备的屏幕上展示网页时，使用设备宽度，避免缩放。

2. 使用响应式CSS

使用媒体查询和CSS3的弹性布局和网格系统等特性，实现响应式布局。例如：

“`
@media screen and (max-width: 768px) {

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

}

@media screen and (min-width: 1025px) {

}
“`

3. 使用CSS框架

CSS框架如Bootstrap、Foundation等提供了响应式布局的支持，可以快速构建适应不同屏幕的网页。只需按照框架提供的HTML和CSS模板进行设计和开发。

以上是实现响应式布局的一些方法，开发人员可以根据需求选择适合自己的方法。