今天完成的事：

1.了解了像素和屏幕分辨率，存在的关系

e.g: 在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，

一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，

从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，

这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

------------------------------------------------------------------------------------

2. 分辨率也叫解析力，单位面积的屏幕上，能够容下多少个像素点

1080P=1920*1080【把一块屏幕分成1980乘以1080块，每一块就是一个PX，像素越多，显示的画面就越细腻】

2K=2056*1440

超清屏幕=2160*1080

全面屏手机的出现，传统的16:9慢慢转变成了18:9

目前主流手机还是有很多向1080P妥协（因为续航问题），而未来如果想采用VR技术4K屏幕都是打底的，因为人眼像素达到5.76亿

------------------------------------------------------------------------------------

3.Viewport自适应

viewport设置移动端自适应的方法：

<meta name="viewport" content="width=device-width, initial-scale=1">

要把当前的(layout) viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但有一个

小缺陷，width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。

所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。

-----------------------------------------------------------------------------------

名称解释：

viewport：网页的可视区域，视区

width：移动设设备下显示的宽度为设备宽度(device-width) 

initial-scale：设备与视口的缩放比率 ，缩放值

三个Viewport——

visual viewport：浏览器可视区域

layout viewport：浏览器默认的viewport（）

ideal viewport ：移动设备理想viewport（最适合移动设备的viewport）

Tips：

1.只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，

那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。

2. ideal viewport无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，

不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

------------------------------------------------------------------------------------

4.之前的九宫格大小是用特定值来做的，在做自适应的时候发现，这样无法呈现出效果，把九宫格的布局改成了百分比（用padding-left 和 padding-top），并设置了父级Div的absolute，使其能带着九个格子居中在页面

.Nineboxes

{

position: absolute;

    /*border: 5px solid ;*/

    background-color: transparent;

    width: 550px;

    height: 550px;

    left: 50%;

    top:50%;

    margin-left: -275px;

    margin-top: -275px;

}

遇到的问题：

1.设置了自适应，但是移动端显示不出来全部画面，经过排查发现，原来在网页制作的时候，把网页缩放到了30%，

调整到100%正常画面后，网页端都无法显示整个九宫格，重新制定九个格子的大小（已解决）

2.发现特定值无法完成自适应，改成用百分比后，九个格子中间的间隙不均匀（未解决）

3.用模拟手机端测试，九宫格无法自适应（未解决）

明天计划：

1.解决上面两个问题，完成自适应

2.配置nginx，完成手机访问

3.注意书写的规范，养成好习惯

4.完成自适应和nginx配置后，尝试用flex来布局九宫格，举一反三