[散修弟子]JS-1690|2018年07月13日的日报-技能树.IT修真院

发表于： 2018-07-13 22:54:14

7 792

今天完成的事情：

1.今天发现如果用昨天（一个大DIV嵌套三个小DIV）*3的方法是无法完成自适应网页的，所以改变思路，先去百度了如何完成自适应网页，发现最普遍的方法是用了meta="viewport"标签。
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
width=device-width【宽度=窗口宽度】 initial-scale=1【缩放比例1：1】 user-scalable=0【用户不可调整缩放比例（感觉并没有啥用）】
设置viewport后要修改的就是div的宽高，不能用固定的像素了，首先想到的是百分比,但是我不知道怎样才能让height=width，百度也搜不到解决方法。故用vw单位，（vw是指将视窗宽度均分为100份，每一份是1vw）所以设置width:100vw;height:100vw;即为一个自适应正方形div。
2.今天下午就把九宫格做出来了，然后搞git和github搞半天，网上各种版本的教程一大堆，而且还都不大一样....再加上自己英语太烂，搞了好久才获取了ssh-key。
3.提交任务没过，发现有横向滚动条，检查推测发现可能是大div右边外边距无法设置成0或者是vw单位所引起的，所以目前正在查阅资料解决中。最终发现是<body>的margin值没有设置为0（才知道body还有默认的margin值为8px）。
【1】次补充：关于九宫格居中，实在是找不到适用的方法，最终只能用数学方法解决了,虽然在google浏览器的检查窗口中九宫格正常，但是如果直接用浏览器打开的话九宫格放大的速度大于视窗拉大的速度，导致视窗拉到height=780px左右九宫格就会溢出视窗，然后就会出现横向滚动条（原因暂时不明）。但也可用修改div大小的数学方法强行解决。