发表于: 2018-07-13 22:54:14
7 790
今天完成的事情:
- 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大小的数学方法强行解决。
【2】次补充:又想了一下,九宫格是1:1,屏幕是16:9,好像是会出问题,感觉宽度要加上限,那么问题来了vw和百分比单位好像都加不了上限.......
明天计划的事情:明天要去一下外地,要是回来的晚的话可能会鸽一天。如果回来的早的话就再研究下git和github,搞清楚到底怎么用
遇到的问题: 1.我想问一下<meta charset="UTF-8">这一类的声明是否需要背?还是纯靠代码编辑器自动写
收获:了解了viewport的用法以及效果;初步了解了写一个自适应网页的基本要求和方法;安装并初步使用了git和github;
评论