制作响应式页面“生活资讯网”项目的总结

第一点，一定要确定选择何种方式来制作，哪种技术都能做出来，只不过使用你越擅长的用起来越得心应手，可选技术有：

• 流式布局（百分比布局）

• flex布局（伸缩盒布局）

• rem适配布局（rem单位+媒体查询+less 或 flexible.js+rem单位）

• 响应式布局(纯响应式布局)

• Bootstrap+响应式布局（推荐使用）

第二点，开局打怪一定要先规划好路线，千万不要二话不说就是干，作为过来人，博主要说的一点就是，一定一定要先使用媒体查询划分好屏幕（不要问为什么，问就是因为这个出现了太多bug了，血的教训哇），在这个页面中使用到了栅格系统，所以屏幕的划分真的很重要，不然当你缩小屏幕的时候，会出现好多bug的，媒体查询书写的时候注意样式的层叠性和优先级，从小屏幕到大屏幕，越下面的样式优先级越大，会覆盖前面的样式，划分如下：

• @media screen and (max-width:768px){超小屏幕}

• @media screen and (min-width: 769px){小屏幕}

•  @media screen and (min-width:992px){中屏幕}

• @media screen and (min-width:1170px){大屏幕}

第三点，对于不同屏幕下导航栏的变化，如果样式弄起来比较复杂，可以直接书写多个不同的导航栏，通过hidden-md（xs/sm/lg等）来显示隐藏其他的导航栏；如果不是很擅长用栅格系统划分导航栏的左中右部分，也是可以选择使用flex布局来制作这个导航栏的部分。

• 
• 
• 

 第四点，代码能少写就少写一点，对于重复的样式，尽量写在一个公共区域，有些东西真的没必要分的那么细，不然修改起来，每个页面对应的css样式修改一次，重复修改同样的语句多次很浪费时间，不仅仅是这样，而且还会代码过多，找起来很麻烦（即使已经添加了注释），导致运行很卡。

第五点，写代码要边写边检查效果如何，发现bug及时修复，需要制作效果的地方先把效果做了，包括过渡属性也记得添加，做完完整的一个页面再开始下一个页面也不着急，不然后面再一起制作效果，是有些许的麻烦的，总时长5天，3天半做完第一个页面也别慌，做的完的，熟能生巧嘛。