阅读本文，你将掌握打造响应式网页的秘诀！

嘿，朋友，你是不是也觉得现在做网站，不搞个响应式设计，简直就是在裸奔？

害，这年头手机端的用户比电脑端还多，你要是还只顾着PC端，那可就有点跟不上节奏了。咱就是说响应式网页设计，它不是锦上添花，是必须的！

太刺激了。 说实话， 响应式网页设计，说白了就是让你的网站在各种设备上都能看，都能用，都能舒服地看。你懂的，现在谁还只用电脑上网啊？

那怎么搞呢？别急，听我慢慢说咱一个一个来。

第一步：搞清楚响应式是啥玩意儿

没法说。 响应式网页设计， 英文叫 Responsive Web Design，简称 RWD。它不是让你的网站在手机上“能看”，而是“好看又实用”。

我不敢苟同... 它基于 CSS3 的媒体查询来实现， 就是说你写一套代码，它能自动适应不同屏幕尺寸，比如手机、平板、笔记本、台式机……统统拿下！

你可能会问，那我是不是得写三套样式？四套？五套，说句可能得罪人的话...？

不对不对，应该是：不用！

响应式设计的核心， 是“一套代码适配所有设备”，而不是“一套代码适配所有设备但写死在每个设备上”，梳理梳理。。

你只需要在 CSS 里加几个媒体查询， 写几个断点，就能让网页在不同设备上自动调整布局。比如：，你没事吧？

@media  {
  .container {
    width: 100%;
  }
}

就这么简单， 你懂的，这玩意儿就是响应式的核心。

第二步：别再用 px 了 用相对单位

px 在响应式里不是敌人，而是锚点。但你不能全靠它。你得用 em、rem、%、vw、vh 这些相对单位，让网页能“自己缩放”。

比如字体大小用 rem，宽度用 %，高度用 vh，宽度也可以用 vw。 哪怕... 这样，你的网页就能像橡皮泥一样，拉伸自如。