做网站最烦什么？电脑上看着好好的，手机上打开就乱套啊。按钮挤成一团，图片撑出屏幕，用户划两下就跑了。

解决办法只有一个：响应式。一套代码，大小屏幕通吃。下面直接讲怎么做。

第一步，加一行meta标签

在HTML的head里写：

没这行，手机浏览器会假装自己是电脑，把页面缩成一小块。加了它，页面宽度才等于手机屏幕宽度。

第二步，别写死宽度

新手最爱写width: 960px。屏幕一窄，横向滚动条就出来了。

换成百分比或者max-width。比如：

.container { width: 90%; max-width: 1100px; margin: 0 auto; }

意思是：最多1100像素，屏幕小就占90%。简单，管用。

图片也一样，加一句img { max-width: 100%; height: auto; }。图片自动缩放，不会撑破布局。

第三步，用媒体查询分档

电脑、平板、手机，屏幕差很多。用@media给不同宽度写不同样式：

@media (max-width: 768px) { ... }

768像素以下，把三栏变一栏，导航收进汉堡菜单。手机用户手指粗，按钮至少44像素高，别做太小。

断点不用太多。一般三档够用：手机、平板、桌面。

第四步，布局用Flexbox或Grid

老办法用float，清浮动能烦死人。现在直接用flex：

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

一行放不下自动换行。Grid更省事，几行代码搞定复杂排版。浏览器都支持，放心用。

第五步，手机上测，别靠猜

写完在电脑上缩窗口只是模拟。真机测试才靠谱。Chrome开发者工具里点手机图标能看个大概，但最好拿自己手机打开看看。字会不会太小？按钮好不好点？图片加载快不快？

还有，移动优先

先写手机样式，再用@media (min-width: 768px)给大屏加东西。这样代码更干净，也逼你先想清楚手机上什么最重要。

响应式不难，难的是养成习惯。每次写完一个页面，缩一下窗口看看。多缩几次，你就不会再写死宽度了。