一.今天完成的事情

九宫格自适应

1.今天发现自己做出来的九宫格无法完成自适应（如下代码）

css样式（如下代码）

以下是参考别人能达到自适应的代码

css样式

通过对比发现：

1.自己的代码相对比较复杂，且没有达到效果

2.别人的代码引入了百分比，而我的代码用的固定的参数，所以我的不能自适应

3.上方css样式中padding-bottom：31%代码的理解：由于这个盒子模型中没有设置高度heigth，且盒子模型没有内容，故此时盒子模型是无法显示的，而padding-bottom是内边距，他此时可以理解为就是高度，当然这里的padding-bottom也可以更改为padding-top

CSS样式

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种

行内式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里，下面这种写法是错误的：

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

内联式

外联式（CSS样式放在单独文件内中）

css样式

#div{width:100px;height:100px;background:red;}

viewport

什么是viewport

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，由设备本身决定），但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。

3个viewport

（1）layout viewport

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。

（2）visual viewport

layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。

（3）ideal viewport

ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。

ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。

ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。

利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。

head标签中加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

二.今天的收获

1.对于九宫格的自适应有了一定的了解：目前先理解为自适应是由于参数设置百分比的原因

2.对于外联这方面有了了解：之前以为代码都是写在一个文件里面的，今天才知道css样式有外联的存在，外联可以让很多文件使用，比较方便高效

3.今天自己做的网页成功通过github上面生成的网址进行了访问，且手机端也可访问

三.今天遇到的问题

1.九宫格无法自适应的问题：具体已在完成事情中说明

三.明天的计划

1.在九宫格的创建中，很多基础还不知道，还需要对比着敲代码，明天加强基础的学习

2.github今天只在别人帮助下使用了一次，不太熟练，明天加强练习

3.回顾任务一，开始任务二