发表于: 2017-04-01 23:17:56
1 633
今天完成的事情:
1、学习了viewport的概念,了解到css中的1px并不等于设备的1px,css中的是虚拟像素,设备屏幕则是物理像素,两者并不相等。
2、学习PPK的关于三个viewport的理论:layout viewport、visual viewport、ideal viewport。
3、学习利用meta标签对viewport进行控制。
4、完成任务一中九宫格的自适应大小。
遇到的问题:
1、自适应的问题。通过查询和学习,找到一种可自适应的方法。
首先利用meta标签对viewport进行控制:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
然后添加css样式如下:
.big{
width:90%;
height:1000px;
border:1px solid #999;
margin:5%;
}
.mini{
float:left;
width:29.3%;
height:0;
padding-bottom:29.3%;
background-color:orange;
margin:2%;
border-radius:10px;
}
用chrome浏览器进行初步测试可实现自适应。
2、这样完成的页面与任务展示的效果有差别,代码有待进一步优化。
明天计划的事情:
1、进一步优化代码,复习这几天学习的知识点。
2、对比师兄们的代码,深入学习。
收获:
1、viewport相关知识点的学习,初步认识它的用法和各属性的作用。
2、自适应是个很神奇的东西,刚学习时做起来有点难度,涵盖的内容很多。
评论