HTML页面手机适配需五步：一、添加viewport meta标签；二、用rem、%等相对单位替代px；三、用媒体查询按断点调整样式；四、采用Flexbox/Grid布局；五、设图片max-width:100%等自适应规则。
如果您创建了一个HTML页面，但在手机上显示时出现布局错乱、文字过小或内容横向滚动等问题，则很可能是页面缺少针对移动设备的视口配置和响应式设计支持。以下是实现HTML页面自适应手机屏幕尺寸的具体方法：
一、添加viewport meta标签
该标签用于告知浏览器如何控制页面的缩放与宽度，是移动端适配最基础且必需的设置。它直接影响页面在不同设备上的初始渲染效果。
1、在HTML文档的
部分插入viewport meta标签。2、使用标准写法：
立即学习“前端免费学习笔记（深入）”；
3、确保该标签位于所有CSS引用之前，避免因加载顺序导致初始渲染异常。
二、采用相对单位替代固定像素值
使用em、rem、%、vw、vh等相对单位可使元素尺寸随屏幕变化动态调整，避免在小屏设备上出现溢出或过小问题。
1、将字体大小从px改为rem，例如将font-size: 16px;替换为font-size: 1rem;
2、容器宽度优先使用百分比或vw单位，如width: 100%;或width: 90vw;
3、行高、边距、内边距等也统一改用rem或em，保持整体缩放一致性。
三、使用CSS媒体查询进行断点适配
通过@media规则，可根据设备屏幕宽度应用不同的样式规则，实现多尺寸屏幕下的精准布局控制。
1、在CSS中定义最小宽度断点，例如@media screen and (max-width: 768px) { ... }
2、在断点内重设关键元素的display、flex-direction、font-size、padding等属性。
3、常用断点建议：320px（超小屏）、480px（小屏）、768px（平板竖屏）、1024px（平板横屏）。
四、启用Flexbox或Grid响应式布局
Flexbox和CSS Grid能自动处理子元素排列与空间分配，无需依赖浮动或绝对定位，显著提升移动端布局稳定性。
1、对容器设置display: flex;并配合flex-wrap: wrap;允许换行。
2、为子项设置flex: 1 0 100%;在小屏下独占一行，大屏下按需分配宽度。
3、使用justify-content和align-items控制主轴与交叉轴对齐方式，增强视觉一致性。
五、设置图片与媒体元素的自适应行为
图片、视频等替换元素若未限制尺寸，在窄屏设备上极易突破容器边界，造成水平滚动条或布局塌陷。
1、为所有img标签添加max-width: 100%; height: auto;样式。
2、对video、iframe等嵌入内容同样设置max-width: 100%;和height: auto;或object-fit: contain;
3、避免在HTML中直接写width和height属性，统一交由CSS控制。
