网页自适应手机和计算机屏幕的设置方法如下：

1. 使用响应式设计：响应式设计是指使用CSS媒体查询，在不同的屏幕大小上自适应页面布局和样式。在CSS文件中添加媒体查询的代码，以根据屏幕尺寸和方向调整布局。

2. 使用Viewport：为了确保在移动设备上正常显示，需要在页面header中添加Viewport元标签。Viewport元标签让浏览器知道如何调整页面内容以适应不同的屏幕大小和方向。

3. 设计弹性布局：使用弹性布局（Flexbox）可以创建自适应的页面布局。弹性布局可以自动调整内容的大小和位置，以及在不同大小的屏幕上重新排列元素。

4. 优化图片大小：为了提高页面加载速度，在不影响图片质量的情况下，可以压缩和优化图片大小。可以使用在线图片压缩工具或者在Photoshop中进行优化。

5. 尽可能使用纯CSS布局：使用纯CSS布局比使用表格等HTML元素更容易实现响应式设计。使用flexbox或grid等CSS布局可以更好地适应不同的屏幕大小和方向。

6. 测试页面：在设计完网页之后，需要在各种设备上测试网页的响应式设计效果，以确保网页在不同的屏幕上能够正常显示。