Skip to content →

首页的重新设计并支持移动设备

之前首页设计的比较乱,看上去可能没问题,但是代码一塌糊涂,下面的留个按钮也是以table的形式排列的,所以根本不兼容移动设备,每次用手机打开时都会感觉到很别扭,强迫症表示受不了。

开始想使用Kube框架的,折腾了一会感觉还是不合适,这个响应式设计的框架如果直接照着使用还行,但是我这里一些地方有自己的设计,不能生搬硬套,改他的css也比较繁琐,于是决定自己针对移动端写一个css。首先把以前的table之类样式全部清理掉,全版面是div的嵌套,感觉轻松了不少,然后修改html:

一三行是针对普通PC端和移动端的css引用,第二行是突发奇想,把移动端的css用到小窗口浏览上。

这里出现一个问题,就是移动设备也会载入PC端的一些样式,所以需要覆盖重写,所以之前copyright的绝对定位是没法使用的,只能一行一行往下挤。但是按钮那一排是浮动元素,copyright自动跟在了上面main文字的后面,雅阁给的办法是after伪类清除浮动,貌似很常用的手段:

之后也没太大问题了,基本就是调调位置之类的了,哦对了,那个,在电脑上显示没问题的图标,放到手机上会显示模糊,我猜测是Retina屏幕的问题,目前还没找到解决方法,以后慢慢说吧。

Published in 学习

2 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注