前言
很久没更新博客,这段时间刚刚找到工作,会立即(从今天起)恢复更新博客的频率。罗马不是一天建成的,希望自己保持良好的学习和做笔记的习惯,笔耕不缀,他日可期!
1.Boostrap重构传统固定px的页面
在第一次接手重构任务后,有点懵逼。可能是因为自己很久没有写代码了,忘了以前做的响应式的一些细节,所以又开始不断的调试,总算是把坑补上了,于是在此做一下记录。
PSD需求图:
整个需求其实蛮简单的,就是一个固定1122px的页面,里面有些图片,图片在pc端需要留出固定margin(需要像素级还原PSD稿)。想了想,自己以前做的响应式都是根据 .container类的默认宽度来写的,于是想了一会便有答案,整体思路如下:
- 给整个页面给一个 container类,并且限制 max-width 为1122px。
- 页面中右侧的小兔,因为所有图片都是从后台接口调取,一旦设定img-responsive,那么默认的max-width就是100%(想象一下,如果后台传来一个1000宽的图,用户网络慢点,基本上就GG了),只能按照原图比例来缩放,何况每个图片的容器都是动态高度的…所以,每张图片的宽高,尽可能的去用js动态设定。
- 尽量使用Rem,设定好body的font-s