发表于： 2019-04-09 20:29:02
1 792
今天完成的事情：
基本完成任务8第一个页面
明天计划的事情：
完成任务8第二个页面
遇到的问题：
任务8是做pc端的网站，就不需要像之前的任务需要考虑自适应的问题，所以内容量很多。任务9跟任务8是一起的，需要在做好的pc端网站基础上增加响应式功能。bootstrap栅格布局很实用，配合其他的比如flex 媒体查询等才能完美实现想要的功能。
遇到了一个问题是在给弹性盒子内使用栅格的时候，由于栅格的宽度是固定百分比，此时使用了justify-content：space-around会导致栅格布局不起作用。
解决方法是给他们的父元素flex添加一个flex-wrap：wrap
出现这种情况是因为bootstrap的栅格用浮动写的，浮动在flex中不起作用，所以flex的子元素不会自己换行，导致设定的的宽度（col-xs-10 width为83%.3333）不起作用。此时声明wrap将浮动覆盖，并生效。
任务8中给页面添加响应式最大的问题就是上述问题，当栅格无法满足我需要的布局，添加flex会跟bootstrap库栅格属性产生冲突，这点解决之后就可以灵活运用栅格、弹性盒子来实现布局的多样性、灵活性。
另外在使用媒体查询中遇到了一点小问题，一开始不理解min-width max-width的意思，写几遍就掌握了。
收获：
引用bootstrap库栅格布局，结合盒子模型各项属性之后能灵活布局。
返回列表
评论