响应式设计：为每一块屏幕而生

想象一个网页在大屏上宽敞整洁，但手机上一团糟——这正是没有响应式设计的后果。借助 CSS 的媒体查询（@media）可以为不同屏幕设定不同样式：

@media (max-width: 768px) {
  .sidebar { display: none; }
}


此外，布局也不再使用固定宽度，而是借助百分比、vw/vh 单位、flexbox 或 grid 实现弹性适应：

.container {
  display: flex;
  flex-wrap: wrap;
}


图片可用 max-width: 100% 保证不溢出容器。配合 meta viewport 设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">


整个网页就能在任何设备上清晰、可用地展示。响应式，不只是技术，是对每一位用户的尊重。