第一点，一定要确定选择何种方式来制作，哪种技术都能做出来，只不过使用你越擅长的用起来越得心应手，可选技术有：
-
流式布局（百分比布局）
-
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天半做完第一个页面也别慌，做的完的，熟能生巧嘛。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6293.html
