今天完成的事情：学习了viewport，优化九宫格代码 

明天计划的事情：学习css中的选择器，继续优化九宫格代码

遇到的问题：宽高按百分比设置成30%，发现啥都没有了，审查发现高度为0，宽度正确，查了下百分比是按父元素的宽高为参照的，父元素默认是body，其宽为浏览器的宽度，高度却为0，为其添加高度却不知添加成啥样，查了下可采用padding-bottom或padding-top来设置成正方形，因为他们是按照父元素的宽度来设置，但不知道还能不能有别的设置方法让它成为正方形

收获：

viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。

layout viewport（布局视口）：

一般移动设备的浏览器都默认设置了一个viewport 元标签（meta），定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

visual viewport（视觉视口）和物理像素：

visual viewport（视觉视口）设备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素：

iPhone5 ：640 * 1136

iPhone6：750 * 1334

iPhone6 Plus：1242 * 2208

ideal viewport（理想视口）和 dip （设备逻辑像素）：

ideal viewport（理想视口）通常是我们说的屏幕分辨率。

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素， 那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：

iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x

iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x

比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

CSS像素：

CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）。

总结：

移动端的分辨率一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值，而此分辨率不等于手机自身的物理像素，如果这手机这个分辨率是320宽，而手机物理像素是640宽，当css中某元素的width=320px，此时在此手机上的显示效果是宽度占满整个屏幕，表明css中的1px宽度等于2个屏幕物理像素的宽度。

使用viewport元标签控制布局

1. <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

width

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，例如：

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

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），

此时：

layout viewport（布局视口）的宽度= ideal viewport（理想视口）的宽度（分辨率）= dip的宽度

把当前的viewport宽度设置为 ideal viewport 的宽度：

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

height

与width类似，实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例：

<meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍

注：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

maximum-scale

maximum-scale用于指定用户能够放大的最大比例，例如

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍。

minimum-scale

类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。通常情况下，不会定义该属性的值，页面太小将难以阅读。

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。

<meta name="viewport" content="user-scalable=no" />

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

注：

通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

但是<meta name="viewport" content="initial-scale=1">

这句代码也能达到和width=device-width达到一样的效果，也可以把当前的的viewport变为 ideal viewport。因为缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，就是 ideal viewport本身，但是到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度

所以在设置当前的viewport宽度设为ideal viewport的宽度时最完美的写法是两者都写上：

<meta name="viewport" content="width=device-width, initial-scale=1">，这样就不会产生横向滚动条

但如果width 和 initial-scale=1同时出现，并且还出现了冲突，浏览器会取它们两个中较大的那个值，谁大听谁的