← FC Coder · HomePhase 05 · Lesson 62 · 60 min
Lesson62
Phase Five · Showcase · Matchday 62 · Mobile Ready
响应式 + 手机
mobile-first
Today's 3 Jobs · 今天这三件事
- 01Chrome 模拟 iPhone · 找裂的Device Toolbar
- 02Tailwind md: / lg: 调 gridmobile-first
- 03🌟 手机能真玩 fantasy + game触屏方向键
Tailwind mobile-first 心法 · 默认 mobile · md/lg 才桌面。Chrome Device Toolbar 模拟手机。/fantasy /game 都过一遍 · 真手机能玩。可选:加屏上方向键。
Concept
mobile-first
// 从小到大 加
默认
grid-cols-1(mobile)
md
md:grid-cols-2(≥768)
lg
lg:grid-cols-3(≥1024)
Half 2
audit · 修 · 触屏 · AI
01找裂 · 调 Tailwind
01Min
Chrome DevTools · Device Toolbar · iPhone 14
看每一页。
02Min
找 5 个裂点 · 记下来
grid 挤 / 按钮太小 / 字太大 等。
03Min
加 md: / lg: 修每个
默认 mobile · md: 平板 · lg: 桌面。
02(可选)屏上按钮
04Min
(可选)/game 加屏上 ↑↓←→ 按钮
onTouchStart / onTouchEnd 模拟 key 按下。
03AI 全站 audit
05Min
AI Trust: 全站响应式 audit
Cmd+K · 'audit /fantasy /game /squads /leaderboard 手机适配 · 给修改建议'。
06Min
📸 截图手机 vs 桌面对比
Phase 5 第 7 张。
讲给爸爸听
3 题
01mobile-first 心法?Hint ↓
默认 mobile · md:/lg: 才大屏。Tailwind 默认。
02Chrome 模拟手机怎么开?Hint ↓
DevTools · Device Toolbar(顶左)· 选 iPhone。
03触屏键盘怎么解?Hint ↓
屏上按钮 onTouchStart / 拖拽手势。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0