做网站，先别管花哨效果啊。第一件事：让手机用户能正常看。

很多人做网站只盯着电脑屏幕。结果手机一打开，字小得眯眼，按钮点不中，横向滚动条拉来拉去。用户三秒就走了。

响应式网站说白了就一句话：同一个页面，自己适应屏幕大小。不用给手机单独做一套。

怎么做？三步。

第一步，加一行代码。

在网页头部加这个：

html

不加这行，手机浏览器会把页面当成电脑版缩着显示。加了，页面宽度就跟手机屏幕对齐了。

第二步，别写死宽度。

新手最爱写 `width: 1200px`。电脑上没问题，手机上直接溢出。改成百分比或者 `max-width`：

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


}

意思是：最多1200，屏幕小就跟着缩。

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

第三步，用媒体查询调布局。

电脑上三栏并排，手机上挤成一团。用 `@media` 分开处理：

css
@media (max-width: 768px) {


.column { width: 100%; }


}

屏幕小于768像素时，三栏变一栏，竖着排。768这个数不是死的，看你的什么时候开始难看就定在哪。

几个容易踩的坑。

字体别用固定像素。手机上一行放不下几个字。建议正文至少16px，行高1.5以上。

按钮要够大。手指点击范围大概44像素见方。做小了用户点不着，骂的是你。

别用hover做关键操作。手机没有鼠标悬停这回事。菜单、下拉，都得能点开。

测试方法很简单：浏览器窗口拖窄，看布局什么时候乱。再用真手机打开看一遍。模拟器不完全靠谱。

还有说一句。响应式不是技术炫技，是基本礼貌。用户拿什么设备来，你就让人家看得舒服。这事做到位，比加十个动画都管用。