&

零基礎網頁開發19（適配移動端）

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年7月27日 23:37 本文熱度 278

這篇我們講解移動端如何適配左右分欄。

之前我們的網頁采用了左右分欄設計，左右分欄在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協同辦公管理系統。