移动端项目总结

　　

　　这次是我第一次的接触到移动端的开发，在开始的迷茫，到最后做到的喜悦，真的是一次很大的收获。本来以为和电脑端的web有很大的区别，然而在做的过程中，发现其实也没有什么很大的区别，就是个视口的问题，也许是我了解的知识太少，目前只知道与这个有关，视口的知识点如下：

viewport(视口的概念)：

meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

表示设定一个“虚拟窗口”就是是为了在小小的屏幕下，可以装载很大的页面

语法：
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
说明：
width – viewport的宽度，支持数值，或特殊字符“device-width”(设备的可见宽)
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

例:

定义视口的宽为设备宽，初始缩放为1倍，最大和最小缩放倍数为1，禁止用户缩放

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=0″>

这次我用到的是<meta name=”viewport” content=”width=750,maximum-scale=1,user-scalable=0”

其中这一次认识到了另一个更为重要的概念，就是响应式布局的问题，在移动端测试时，发现它是会自动的随屏幕的大小去调节的，但是电脑pc端的情况就不太一样了，看老师示范一下，好像要用到@media这些，所以说我需要的是去了解这个知识点。

        在上次的项目教训告诉我一个道理，就是再没什么必要的时候，为了兼容IE8，还是要尽量少用CSS3的新属性、定位以及多重背景，在移动端就没什么关系，这点还是值得我去注意的。

     　在这次的项目中，又学到了一些知识，就是在底部点击切换页面是，会有在那个页面，底部那图标就会显示橙色，其他显示白色的样式，一开始我以为需要用到伪类target的知识点，然后做了没成功，然后我又想用多重背景去做，还是不行，值得庆幸的是看到前面的一个同学做了这个效果，我就去问他，之后就轻松的解决了。所以说多请教多问还是很有必要的。希望能在改写小巨蛋的时候能做到更好吧。