发表于: 2017-03-26 21:44:16

1 629


今天完成的事情:完成了九宫格的任务,解决了我的小方块随屏幕宽度自适应的问题,有如下几种方式可以自适应:

                          1.将小方块的宽度单位设置为%,是父元素宽度的百分比。但是由于父元素的高度是固定值,若将小方块的单位也设置为%,代码展示在移                            动端时,会造成小方块高度方向的拉伸。

                          2.将小方块的宽度单位设置为em,em是方块内字体的宽度大小。

                          3.将小方块的宽度单位设置为vw,vw是viewport的宽度比例,可以解决小方块高度自适应的问题。

                         综上采用了第3中方式。

                         另外一点是图案居中的问题,有两种方案:

                         1.将小方块的浮动去除,其display设为inline-block,可以为小方块设置text-align:center,这样小方块会居中,但是每个方块之间会有一                            段默认的间隙,在各个浏览器中默认的间隙宽度都不同,无法删减使各个浏览器保持一致。

                         2.计算出一排小方块的总宽度,将总宽度设置为外围大方块的宽度,这样小方块就在那大方块内居中了,外围大方块再设置margin:                                  auto,即可在浏览中居中。

                         

                        之后看了github的使用教程,github是分布式代码管理器,花了些时间将github安装到本地,然后将九宫格代码传到了github。

明天计划的事情:找一个服务器,将代码上传到服务器中,将自己的demo展示出来。做魔镜任务。

遇到的问题:还没有。

收获:学习到了自适应的布局方法。


返回列表 返回列表
评论

    分享到