零基础网页开发19（适配移动端）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月27日 23:37 本文热度 12

这篇我们讲解移动端如何适配左右分栏。

之前我们的网页采用了左右分栏设计，左右分栏在PC端很常见，但在移动端的小屏幕上，左右并排会导致内容区域过窄，难以阅读和操作。

所以我们需要改变布局方式，通常从左右并排变为上下堆叠（垂直排列）。修改的方式也很简单，回到CSS样式表，把flex的排列方式改成纵向的column

修改完以后，界面会如下显示：

此时，框架搭建完毕，接下来就是美化的活了。

📦 代码逐行详解

.shop img {  width: 100%;  /* ✅图片宽度撑满屏幕 */}/* 作用：商品图片自动适应手机窄屏，避免被裁剪 */
.info {  width: 100%;   /* ✅区块宽度撑满屏幕 */  padding: 40px 0; /* ✅增大上下内边距 */}/* 效果：商品信息区变成手机上的纵向长条，呼吸感更强 */
.info h2 {  font-size: 30px; /* ✅放大标题字号 */}/* 适配逻辑：手机阅读需更大字体，避免用户缩放 */
.product {  flex-direction: column; /* ✅核心适配：变横向排列为纵向堆叠 */  padding: 60px 0;        /* ✅区块上下增加留白 */}/* 示例：PC端商品横排 → 移动端商品竖排 ▼  [商品1] [商品2]  →  [商品1]  [商品2] */
.product div {  margin-bottom: 30px; /* ✅商品间隔增加 */}/* 目的：手指触摸时不误触相邻商品 */

⚙️ 适配移动端的4大关键技术

1. width: 100%

◦ 图片/区块横向撑满屏幕 → 避免出现空白或滚动条

◦ 为什么？手机屏幕窄，内容必须自动收缩

2. flex-direction: column（核心❗）

◦ 将.product容器内的商品从横排改为竖排

◦ 对比PC：

/* PC端横向排列 */.product { flex-direction: row; }

3. 触摸友好设计

◦ padding: 40px 0：增大点击区域

◦ margin-bottom: 30px：防止商品堆叠时误触

◦ font-size: 30px：小屏幕文字更清晰

4. 空间优化策略

◦ 纵向排列释放宽度 → 不再需要左右滑动

◦ 大留白设计 → 缓解手机屏幕信息密集压迫感

🌰 实际效果演示

PC端原始布局（代码适配前）

[商品图]  [商品信息][商品1]   [商品2]   [商品3]

移动端适配后（通过这段代码）

[商品图][商品信息]--------------[商品1]--------------[商品2]--------------[商品3]

如此，一个适配移动端的版面设计就完成啦，快跟着本文步骤，一起试试吧！

通过本系列19篇文章，足以让我们对HTML和CSS有一个初步认知，希望对网页开发有兴趣的同学们，能有一些帮助。在跟着文章步骤实践的过程中，有任何疑问，欢迎留言或者私信探讨，也希望我们可以在学习的道路上彼此支撑。

下期我会将文章中所有的示例代码做一个整合，方便你直接复用，查看网页效果。

阅读原文：原文链接

该文章在 2025/7/29 12:32:42 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。