发表于: 2017-03-26 21:44:16
1 630
今天完成的事情:完成了九宫格的任务,解决了我的小方块随屏幕宽度自适应的问题,有如下几种方式可以自适应:
1.将小方块的宽度单位设置为%,是父元素宽度的百分比。但是由于父元素的高度是固定值,若将小方块的单位也设置为%,代码展示在移 动端时,会造成小方块高度方向的拉伸。
2.将小方块的宽度单位设置为em,em是方块内字体的宽度大小。
3.将小方块的宽度单位设置为vw,vw是viewport的宽度比例,可以解决小方块高度自适应的问题。
综上采用了第3中方式。
另外一点是图案居中的问题,有两种方案:
1.将小方块的浮动去除,其display设为inline-block,可以为小方块设置text-align:center,这样小方块会居中,但是每个方块之间会有一 段默认的间隙,在各个浏览器中默认的间隙宽度都不同,无法删减使各个浏览器保持一致。
2.计算出一排小方块的总宽度,将总宽度设置为外围大方块的宽度,这样小方块就在那大方块内居中了,外围大方块再设置margin: auto,即可在浏览中居中。
之后看了github的使用教程,github是分布式代码管理器,花了些时间将github安装到本地,然后将九宫格代码传到了github。
明天计划的事情:找一个服务器,将代码上传到服务器中,将自己的demo展示出来。做魔镜任务。
遇到的问题:还没有。
收获:学习到了自适应的布局方法。
评论