要让网页在手机上适配，可以采取以下几种方法：

响应式设计

使用响应式设计技术，通过灵活的网格系统、相对单位和媒体查询等技术，使网页能够根据不同设备的屏幕尺寸自动调整布局和样式。

媒体查询可以根据设备的屏幕宽度、高度、分辨率等属性，加载不同的CSS样式，实现页面在不同设备上的最佳展示效果。

弹性布局

使用弹性盒子（Flexbox）和网格布局（Grid），让网页元素根据屏幕大小自动伸缩和排列。

弹性盒子布局可以实现灵活的网页布局，在不同屏幕宽度下呈现不同的布局效果。

Viewport标签

在网页代码的头部加入一行viewport元标签，控制网页在移动设备上的显示效果。

示例代码：``，这行代码的意思是网页宽度默认等于屏幕宽度，初始缩放比例为1.0。

相对大小的字体

字体不能使用绝对大小（px），而只能使用相对大小（em），以便根据屏幕大小自动调整字体大小。

流动布局（Fluidgrid）

使用流动布局，各个区块的位置都是浮动的，不是固定不变的，以适应不同屏幕尺寸。

使用响应式框架

使用如Bootstrap、Foundation等响应式框架，这些框架提供了一套响应式的网页模板和样式，可以快速构建适应手机端的网页。

图片和字体优化

图片在网页中占据重要位置，其适配性直接影响页面加载速度和展示效果。可以通过设置图片的最大宽度或使用CSS的`background-size`属性，让图片根据屏幕大小进行自适应调整。

字体也可以通过相对大小（em）来适应不同屏幕尺寸。

测试和优化

在不同的移动设备和浏览器上测试网站，确保它在各种情况下都能正常运行，并根据用户反馈不断优化。

通过以上方法，可以确保网页在手机上具有良好的适配性和用户体验。