做网站，先想清楚一件事：用户不一定用电脑看。手机、平板、笔记本，屏幕宽度从三百多像素到两千多像素都有。网页得跟着变，这就是响应式。

第一步，别急着写代码。先确定主要。手机上放不下的东西，电脑上再好看也没用。把核心信息列出来，其他的往后放。

第二步，加一行meta标签。放在head里：

没这行，手机浏览器会把网页缩成一小块，字小得看不清。

第三步，别写死宽度。用百分比，或者flex、grid。比如两栏布局，电脑上左边60%、右边40%，手机上堆叠成上下两行。媒体查询写在CSS里：

@media (max-width: 768px) {

.left, .right { width: 100%; }

}

就这么简单。768像素不是死规矩，看你的什么时候挤不下，就在哪断。

第四步，图片要灵活。给img加一句max-width: 100%; height: auto;。图片不会撑破容器，也不会变形。大图记得压缩，手机流量不是白来的。

第五步，字体别太小。手机上正文至少16像素，按钮要够大，手指点得中。行距拉开一点，读着不累。

第六步，测。别只在电脑上拖窗口。拿真手机看，安卓和苹果都试试。横屏竖屏都转一下。导航菜单在手机上是不是点得到？表格会不会溢出？这些细节，模拟器骗得了眼睛骗不了手指。

最后一点说个常见毛病：什么都想响应。其实不是每个元素都要变。有些东西手机上就该藏起来，或者换个样子。别为了响应式把页面搞得太复杂。

响应式不是技术炫技，是让每个用户都能正常用你的网站。屏幕再小，信息得清楚；屏幕再大，也别空荡荡。做到这两点，就够了。