做网站，先想清楚一件事：用户不一定用电脑打开。手机、平板、电脑，尺寸五花八门。响应式网站就是让同一套代码，在哪都能看、都好用。

第一步，加一行meta标签。放在head里：``。没这行，手机浏览器会把网页当成电脑版缩小，字小得看不清。

第二步，别写死宽度。老办法是`width: 960px`，现在改成`max-width`，或者直接用百分比。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破屏幕。

第三步，用媒体查询。这是响应式的核心。比如：

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


.sidebar { display: none; }


.content { width: 100%; }


}

意思很直白：屏幕窄于768像素时，侧边栏藏起来，正文占满。断点不用多，常见的三档就够：手机（小于768）、平板（768到1024）、电脑（大于1024）。按需要调，别照搬数字。

第四步，布局用flexbox或grid。以前用float排版，清浮动清到头大。现在一行`display: flex`，子元素自动排列，换行也方便。grid适合整页分栏，两列三列改起来快。

第五步，字体和按钮要适应手指。手机上字号别小于16px，不然iOS会自动放大页面。按钮高度至少44px，手指点得准。导航在小屏上收进汉堡菜单，省地方。

第六步，测试。别只在电脑上拉窗口看。用浏览器开发者工具切手机模式，再拿真手机打开。重点看三处：文字会不会溢出、图片会不会变形、按钮好不好点。

还有，别追求百分百适配所有设备。抓住主流尺寸，把做清楚，比堆一堆断点强。响应式不是炫技，是让用户少费劲。