发表于： 2019-04-03 13:21:56
3 817
今天完成的事情：
1.看完PPK大神的viewport2：https://www.quirksmode.org/mobile/viewports2.html
2.看了博客园无双的viewport的理解：http://www.cnblogs.com/2050/p/3877280.html
3.发现了各手机软件ideal viewport size的网站：http://viewportsizes.com/
4.看了响应式设计的文章：https://www.jianshu.com/p/fb982ea8dce3
5.弄出了一个算是自适应的九宫格，但是，不确定有没有写错代码。
代码如下：
<!DOCTYPE html>
<head lang="en"></head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width:400px)"
href="index.css" />
<style type="text/css">
.wrap
{
float:left;
border:1px solid white;
border-radius:10%;
margin:2% 2% 2% 2%;
padding-top:10%;
padding-bottom:10%;
background-color:orange;
height:28%;
width:28%;
}
.div
{
display:block;
}
.clear
{
clear:both;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
</body>
</html>
6.下载nginx。
明天计划的事情：
1. 提交任务一，领取任务二。
遇到的困难：
1.没看懂以下的缩放
2.不懂window.innerWidth/ Height的值的具体含义。为什么放大浏览器窗口，数值会减少？（但我可以把它理解为密度，这样就懂了）
3.下载了nginx，解压后不懂如何安装。
4.九宫格格式很难调。也许我代码写错了。但是，也实在不知道应该怎么改。（哭）
收获：
1.算是弄了个自适应吧。
返回列表
评论