做网站，先想清楚一件事：用户在用手机看你。

这不是趋势，是现实。大部分网站的流量早就过半来自手机。你花三天调好的PC端布局，用户滑动两下就走了。

响应式网站解决的就是这个问题。一套代码，电脑、平板、手机都能正常看。

别急着上框架。先搞懂三个基础。

第一，视口标签。在head里加这行：``。就这么简单。没这行，手机浏览器会假装自己是980px宽的屏幕，把页面缩小，字小得没法看。

第二，媒体查询。简单说，就是给不同屏幕宽度写不同的CSS。比如：

.container { width: 960px; }
@media (max-width: 768px) {


.container { width: 100%; padding: 0 16px; }


}

屏幕窄于768px时，容器变成全宽。就这么直接。

第三，用相对单位。别满篇写像素。宽度用百分比或`fr`，字号用`rem`。这样做的好处是，屏幕变大变小，元素跟着走，不用一处处改。

再说布局。

老办法是浮动。能用，但麻烦。现在直接上Flexbox和Grid。Flexbox适合一行内的排列，Grid适合整页布局。学起来不难，用起来省事。网上教程很多，挑一个跟着敲一遍就会。

图片也要处理。给图片加`max-width: 100%`，它会自动缩小，不会撑破容器。就这么一句，能省你很多事。

测试的时候别只看模拟器。模拟器骗人。拿你自己的手机、平板、旧手机都试一遍。很多问题只有真机上才暴露。

还有一个常见坑：导航栏。PC上一排横着没问题，手机上挤成一条线。解决办法是改成汉堡菜单。用CSS加一点JS就能做，不用插件。

字体别太小。手机上看12px的字，等于受罪。正文至少16px起步。行高给到1.5以上，读起来不累。

最后一点提醒一句：响应式不是做完就完事。新加、改布局，都要回头看一眼手机端。养成这个习惯，网站才不会慢慢烂掉。

现在打开你的编辑器，从那个视口标签开始。