一起动脑筋 · 先看一个小故事
机器人传给女孩的不是一张网页照片，而是让浏览器组装页面所需的数据。
把过程摊开来看
- 服务器提供 HTML
- 浏览器建立页面结构
- 资源取得样式与图片
- 排版绘制出现可读页面
网页从服务端到屏幕，经历网络传输和本地呈现。
HTML 告诉浏览器哪些是标题、段落和图片位置；CSS 影响尺寸与布局。浏览器计算元素位置，再把像素画到屏幕。
手机与电脑宽度不同，同样的内容可以用响应式布局重新排列。
轮到你来试一试
手机上卡片从三列变成一列，是否必须由服务器重新写一篇文章？
想好了吗？点开看解释
通常不需要。相同内容可由 CSS 根据可用宽度重新排版。
带走一个发现
网页从服务端到屏幕，经历网络传输和本地呈现。
试着遮住上面的图，把每一步讲给家人听。如果某一步说不清楚，就回到那张卡片再看一遍。