发表于： 2017-07-25 23:30:29
1 513
今天完成的事情：
今天继续完善任务8，为页面添加媒体查询让页面在不同屏宽下改变字体大小；为页面添加bootstrap，让导航栏在页面变小时隐藏并出现按钮，
任务9就是为页面添加响应式，也就是说任务9基本完成了。
明天计划的事情：
明天计划再检查任务8并开始总任务10。
遇到的问题：
在写下面这个页面时，一开始我给网页的两个区域设定了百分比宽，虽然页面在宽屏下没有问题，但是在窄屏下显示会很差，而且使用栅格布局也有问题。后来我在F12中查看代码发现有min-width和max-width这样的属性，于是我尝试给左边一个max-width:30%，右边min-width:60%的属性，然后使用栅格布局，使页面在宽屏下能够显示良好；最后使用媒体查询让左边的部分在小屏幕时max-width:100%；这样就让页面达到想要的效果。
col-xs-12 col-sm-6
收获：
能够使用bootstrap改变导航栏在不同屏宽下的显示效果，学会使用max/min属性，之前从来没用过，能够更加熟练的使用媒体查询。
返回列表
评论