本文详细记录了将工商银行网页界面从仅支持PC端改为支持移动端的过程。作者面对页面无响应式设计和大量图片的挑战，通过CSS中的@media媒体查询功能进行反复调整。最终实现了页面在不同设备上的良好展示，并分享了在引用Bootstrap样式时的注意事项。
早早写好了一个界面，工商银行的网页界面。做好之后感觉没有什么挑战性，结果我就脑残的活生生的把一个只支持PC端的网页改成手机也支持的版本了，最痛苦的不过那个过程了，页面本身没有带有响应式，而且图片还超级多，然后用着@media的媒体查询功能在CSS里面不停地做着修改。不过无论怎么样，结果还是客观的，写完了一大半，其余的作业还有待改善。然后发现了几个小问题，在bootstrapt里面，默认定义的container-fluid多出屏幕15px 也就是说把margin-right设置的是-15px，只有在前面重新定义一下margin-right：0px,就可以把之前的默认定义覆盖了。最后感慨一句，媒体查询真是一个伟大的属性，刚开始使用的时候发现设置的效果都没有显示，最后发现在引用外链样式的时候，必须把bootstrapt.min.css放在自定义的css后面才能够得到正常的效果。以上，明天继续努力！
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
