做网站最怕什么？电脑上排得漂漂亮亮，一到手机上就挤成一团。响应式网站就是解决这个问题的。说白了，让同一个网页在手机、平板、电脑上都能看得舒服。

第一步，加个viewport标签。这行代码扔进head里：

没它，手机浏览器会把网页当成电脑版缩小显示，字小得没法看。

第二步，别写死宽度。很多人习惯给盒子定个固定像素宽度，比如width:960px。手机屏幕才375px，直接溢出。改成百分比或max-width。比如max-width:960px; width:100%。这样大屏不撑满，小屏能缩回来。

第三步，图片要听话。给图片加max-width:100%; height:auto。图片就不会把手机屏幕撑破。

第四步，用媒体查询。这是响应式的核心。简单说就是“屏幕小于某个尺寸时，换一套样式”。比如：

@media (max-width: 768px) {

.nav { flex-direction: column; }

}

意思是屏幕宽度小于768像素时，导航从横排变竖排。手机上点着方便。断点不用太多，两三个够了。常见是768和480。

第五步，多用flexbox。以前用float排版，现在没必要。flex让元素自动换行、自动分配空间。加个flex-wrap: wrap，挤不下就换行，省心。

第六步，字体也别写死。用rem或vw。桌面16px正文，手机上14px到15px更合适。媒体查询里调一下根字号就行。

第七步，测试。写完在浏览器里按F12，切到手机模拟模式，拖宽度看效果。真机也要试，模拟器不完全靠谱。重点看导航、表格、图片有没有溢出。

还有个小坑：别用固定高度。一多就溢出。高度让自己撑。

响应式不是什么高级技术，就是几个习惯：宽度用百分比，图片加限制，关键地方加媒体查询，排版用flex。花半小时调一调，手机上看着就顺眼了。用户不会夸你技术好，但至少不会骂“这网站没法看”。