发表于: 2018-07-05 20:59:32
3 703
今天完成的事情:了解了媒体查询,然后了解了bootstrap布局的时候什么时候用xs,sm,md,lg。
明天计划的事情:写任务
遇到的问题: 战略合作企业板块使用col-lg-3会使一张图片溢出来,然后使用col-lg-2的话有无法占满屏幕,后来使用col-lg-2把width设为20%然后铺满屏幕。
收获:媒体查询Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。
使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。
当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap,也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候;
一行最多占十二个标签,不管是大屏还是超小屏的时候;
col-lg一般用于大屏设备(min-width:1200px),col-md一般用于中屏设备(min-width:992px),col-sm一般用于小屏设备(min-width:768px),col-xs用于超小型设备(max-width:768px);后面跟数字是几,也就是占几份。比如是4,也就是一行可以显示3个;或者12,就是一行可以显示1个;
一般设置的话四个属性都用到会比较好,这样就可以在不同屏幕上很好的展示;
比如你有了12个section标签,你想让他们在不同屏幕大小的时候有不同的展示方式,
大屏时一行显示6个,中屏时一行显示3个,小屏时一行展示2个,超小屏一行展示1个,
禅道:
css-task8
任务开始:6.28
预计结束:7.7
禅道主页:http://task.jnshu.com/zentao/project-task-765.html
评论