基于bootstrap特殊分辨率页面的实现思路

前言

很久没更新博客，这段时间刚刚找到工作，会立即（从今天起）恢复更新博客的频率。罗马不是一天建成的，希望自己保持良好的学习和做笔记的习惯，笔耕不缀，他日可期！

1.Boostrap重构传统固定px的页面

在第一次接手重构任务后，有点懵逼。可能是因为自己很久没有写代码了，忘了以前做的响应式的一些细节，所以又开始不断的调试，总算是把坑补上了，于是在此做一下记录。
PSD需求图：
整个需求其实蛮简单的，就是一个固定1122px的页面，里面有些图片，图片在pc端需要留出固定margin（需要像素级还原PSD稿）。想了想，自己以前做的响应式都是根据 .container类的默认宽度来写的，于是想了一会便有答案，整体思路如下：

1. 给整个页面给一个 container类，并且限制 max-width 为1122px。
2. 页面中右侧的小兔，因为所有图片都是从后台接口调取，一旦设定img-responsive，那么默认的max-width就是100%(想象一下，如果后台传来一个1000宽的图，用户网络慢点，基本上就GG了)，只能按照原图比例来缩放，何况每个图片的容器都是动态高度的…所以，每张图片的宽高，尽可能的去用js动态设定。
3. 尽量使用Rem，设定好body的font-s