这次是我第一次的接触到移动端的开发,在开始的迷茫,到最后做到的喜悦,真的是一次很大的收获。本来以为和电脑端的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的知识点,然后做了没成功,然后我又想用多重背景去做,还是不行,值得庆幸的是看到前面的一个同学做了这个效果,我就去问他,之后就轻松的解决了。所以说多请教多问还是很有必要的。希望能在改写小巨蛋的时候能做到更好吧。