← 返回知识卡片
No.18● 编程与网页更新于 2026.10.12

网页怎么在手机上也好看？

关键词：响应式 · 适应不同屏幕

网页怎么在手机上也好看？ 的示意插画
一句话说清用弹性布局和断点，让同一个网页在电脑上排成多列、在手机上自动变成一列。

打个比方

像能变形的家具：客厅大时展开成沙发，房间小时折成一把椅子。

记住这一点

先照顾内容，再决定布局。

举个例子

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }  /* 手机上变一列 */
}

常见误区

  • ✕ 要单独做一个手机版网站✓ 现在通常一套代码适配所有屏幕。
  • ✕ 在电脑上把窗口拉窄就够了✓ 最后一定要在真手机上看一遍，触摸和字号的感受不一样。

动手试一试

在浏览器按 F12，点开手机模拟模式，看看你喜欢的网站在手机上是怎么重新排版的。

考考你

3 道小题，看看这张卡片记住了多少。选完马上能看到解析。

  1. 1响应式网页的意思是？

  2. 2代码里 @media (max-width: 640px) 的作用是？

  3. 3做完响应式页面，最后一步最好是？

接着翻这几张

No.10 · 编程与网页一个网页是怎么搭起来的？No.14 · 编程与网页网页里的间距怎么来的？No.22 · 编程与网页一样的按钮，需要反复写吗？

灵点AI 知识卡片 · 第 18 / 48 张