做独立博客这十年，见过太多人为了个网站排版愁得睡不着觉。以前我也一样，总觉得搞个响应式就是调几个媒体查询（media query），结果上线后才发现，手机端字小得像蚂蚁，电脑端又留了一大片白边，尴尬得要死。今天不跟你扯什么大道理，直接掏点压箱底的干货，分享几个我亲测好用的响应式布局代码例子，希望能帮正在踩坑的你省点时间。

说实话，刚开始我也迷信各种复杂的 CSS 框架，什么 Bootstrap、Foundation，下载下来几兆大，加载慢得要命，还得改一堆配置才能用对地方。后来我就琢磨了，其实很多需求根本不需要那么重，写原生 CSS 配合 Flexbox 或者 Grid，反而更灵活。比如最近有个朋友问我，怎么让图片在不同屏幕下自动缩放还不变形？我当时就给他甩了这个最简单的响应式布局代码例子：

`css

img {

max-width: 100%;

height: auto;

display: block;

}

`

看着挺简单吧？但这行代码能解决 80% 的图片溢出问题。不过要注意啊，有些老浏览器可能不支持 display: block，虽然现在很少见了，但如果你还在维护那种几年前的旧项目，记得加个兼容处理。还有啊，千万别忘记给容器设个 padding，不然文字贴边，用户体验极差，这点血泪教训是我当年被用户吐槽多了才悟出来的。

再说说那个让人头大的导航栏。很多新手喜欢把菜单做得特别花哨，结果在手机上点开全是重叠的按钮。这里分享一个基于 Flex 的移动端汉堡菜单思路，这也是我常用的响应式布局代码例子之一。核心就是利用 @media 断点，当屏幕宽度小于 768px 时，把横向排列改成纵向堆叠。

`css

.nav-menu {

display: flex;

justify-content: space-between;

}

@media (max-width: 768px) {

.nav-menu {

flex-direction: column;

background: #fff;

position: absolute;

top: 60px;

width: 100%;

z-index: 999;

}

}

`

注意哦，这里的 position: absolute 一定要配好父容器的 relative，不然菜单会飘到页面上去，这就很搞笑了。而且，千万别把 z-index 设得太低，不然会被底部广告遮住了，我上次就因为忘了这个细节，导致用户点了半天菜单没反应，差点被骂死。对了，还有个细节，有些小伙伴喜欢用 float 来做布局，真的劝你趁早放弃，那是上个世纪的技术了，现在的 Flex 和 Grid 才是王道，虽然学习曲线稍微陡了点，但真香。

说到价格，很多人问我要不要买现成的主题。其实吧，对于刚起步的博客，花几百块买个主题不如自己敲代码实在。毕竟模板更新慢，bug 多，出了问题还得等客服，哪像自己写的代码，改起来随心所欲。我自己折腾这些响应式布局代码例子的时候，也没少花冤枉钱，试过不少付费插件，最后发现还是原生代码最稳。当然，如果你完全不懂技术，那还是老老实实找个靠谱的主题吧，别硬撑，不然服务器崩了都怪不到自己头上。

最后再啰嗦两句，做网站最怕的就是“差不多就行”。字体大小、行高、间距，这些细节决定了你的网站是专业还是业余。比如在手机端，字号最好别小于 14px，否则用户得眯着眼看，谁受得了？还有，测试的时候别光盯着 Chrome 看，Safari 和 Firefox 偶尔也会给你整点意外惊喜，特别是 iOS 上的 Safari，它的滚动条行为跟安卓有点不一样，记得多测几次。

总之，响应式布局代码例子不是万能的，但掌握它们能让你少走很多弯路。网站做好了，不仅用户看着舒服，百度收录也更快，何乐而不为呢？希望这几段代码能帮你解决眼前的难题，如果还有什么搞不定的，欢迎在评论区留言，咱们一起交流，毕竟独乐乐不如众乐乐嘛。

好了，今天就聊到这，我去喝口水，继续改我的代码去了。