打开电脑做网站，先想想手机。现在一半以上流量来自手机，你的网站在手机上歪歪扭扭，用户三秒就关。

响应式就是让同一套代码，在电脑、平板、手机上都能看。不用做三个网站。

第一步：加一句话

在HTML的head里加上：

html

没这句，手机浏览器会假装自己是电脑，把网页缩成蚂蚁大小。加上它，手机才知道自己是手机。

第二步：别写死宽度

新手最爱写 `width: 1200px`。手机屏幕才375px，直接溢出，用户得左右划。

改成百分比或max-width：

css
.container {


max-width: 1200px;


width: 100%;


}

图片也别忘了：

css
img {


max-width: 100%;


height: auto;


}

第三步：学媒体查询

这是响应式的核心。简单说就是“屏幕小于多少时，换一套样式”。

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


.nav {


flex-direction: column;


}


.sidebar {


display: none;


}


}

意思是：屏幕宽度768px以下时，导航竖着排，侧边栏藏起来。手机上寸土寸金，不重要的东西先让路。

断点不用太多，两个够用：768px管手机和小平板，1024px管大平板。别搞五六个断点，自己都记不住。

第四步：用flexbox和grid

以前用float排版，现在没必要。flexbox一行搞定：

css
.cards {


display: flex;


flex-wrap: wrap;


gap: 16px;


}


.card {


flex: 1 1 300px;


}

`flex-wrap: wrap` 是关键。空间不够自动换行，卡片在手机上排一列，电脑上排三列，不用写媒体查询。

第五步：手机上别搞花活

悬停效果在手机上不存在。大背景图在手机上加载慢。字体小于14px手指点不准。

按钮至少44px高，这是苹果的建议。导航别藏太深，汉堡菜单可以，但别套三层。

第六步：真机测试

浏览器开发者工具有手机模拟，但不够。拿真手机打开看看。手指能不能点到按钮？文字会不会太小？图片加载快不快？

Chrome的“设备模式”可以模拟各种屏幕，但触摸手感和真实网络速度，模拟不出来。

末了说说个笨办法

写完一个页面，把浏览器窗口慢慢拉窄。从全屏拉到手指那么宽。哪里开始乱，哪里就是需要修的地方。这比记断点数值直观多了。

响应式不难，核心就三件事：宽度别写死、图片别撑破、小屏幕少塞东西。做到这三点，手机用户不会骂你。