发表于: 2018-12-31 01:10:01
1 709
今天完成的事情:
任务1:九宫格——用html+css制作一个网页
此任务已完成过半,除了nginx尚未配置完成外已完成了移动端的九宫格样式。
并配合rem的方式使页面缩放的同时等比的完成所要的页面架构。
明天计划的事情:将页面使用nginx进行配置,最终使用手机访问网页
遇到的问题:宽度的部份可使用width:calc(100%/3)的方式等比配置,高度的部份却不能。
收获:
通过今日的学习看见其他同学使用padding的部份完成了此次工作,所以在解决今天遇到的问题时宽度仍以
width: calc(100%/3 - (0.1066666667rem)*2);
的方式等比配置,高度则替换为使用
padding-bottom: calc(100%/3 - (0.1066666667rem)*2);
而很多同学也出现过的九宫格不置中的情况则使用以下方法解决
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
评论