首次使用HTML与CSS开发 如何实现页面移动端视图适配

这是我第一次尝试使用HTML和CSS编写页面，我清楚当前代码存在不少问题，如果有人能给我指明适配方向，让页面可以在移动设备上正常浏览，我会非常感激。

你可以按照下面的优先级逐项排查调整，就能解决绝大多数新手写的页面移动端显示异常的问题：

• 首先必须在HTML的<head>标签内加入视口元标签，这是移动端适配的前提，没加这个标签的话，移动浏览器会默认按桌面端宽度渲染页面再整体缩放，内容会挤成一团：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 不要给页面核心容器写死固定像素宽度，比如不要直接写width: 1200px，换成最大宽度加相对宽度的写法，既保证大屏不会太宽，小屏也能自动适配宽度不出现横向滚动条：

.container {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
}

• 给全局图片加上自适应规则，防止图片尺寸过大撑出横向滚动条：

img {
  max-width: 100%;
  height: auto;
}

• 布局优先使用flex或者grid实现，尽量避免大量使用绝对定位、浮动来排布元素，这两种现代布局方式支持通过简单的配置实现自动换行、等比分配空间，适配成本极低。
• 调整交互元素和字号适配移动端操作：移动端正文字号不要小于16px，按钮、可点击链接的触控区域不要小于48*48px，避免手指点击不到。
• 如果需要针对手机端做专门的样式调整，可以使用媒体查询，在屏幕宽度小于指定阈值时覆盖原有样式，比如把大屏下并排的多栏布局改成上下堆叠、调整间距大小、隐藏非必要的装饰元素等：

/* 屏幕宽度小于768px时（对应手机端场景）生效 */
@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column;
  }
}

目前你只贴出了段落文本的代码片段，没有提供完整的页面代码，没法精准定位你代码里的具体错误，你可以按照上面的步骤从最基础的视口标签开始排查，绝大多数新手遇到的移动端适配问题都是漏加视口标签、元素宽度写死导致的，调整完这两项基本就能实现页面在移动端正常浏览。

内容的提问来源于stack exchange，提问作者xunjez