发表于: 2017-06-17 23:30:18

1 933


今天完成的事情:上午继续昨天的进度,完成了首页样式和布局的调整,适应800px的分辨率。下午开始找职位页的样式和布局的处理,对侧边栏、搜索框、轮播图的大小等做了仔细的修改,对写死部分的布局做了大面积的调整,截止到写日志前,刚开始进行找精英样式和布局的修改,因为多是写死部分,所以大部分也没有使用栅格布局进行编写,估计有些难度,正在积极处理中。

明天计划的事情:完成找精英样式和布局的修改,完成关于我们页,搜索职位页、搜索公司页等页面样式、布局的修改工作,准备小课堂的内容整理。

遇到的问题:主要是写死部分的布局修改,以前都是写死的,并且只在一定分辨率范围内效果比较好,现在要适应到800px,所以相对而言,对于以前的布局,单位等要做相应的修改。为了配合大局,使用了rem,局部地方,为了更流畅地看出变化,改成了%为单位的值。有的地方高度写死的,在900px以下文字会溢出,所以使用媒体查询的办法,将一定分辨率下的高度去掉了,使用内部文字等内容进行撑起来。基本就解决了溢出的问题。

 再者,就是找职位上部,侧边栏、搜索框、轮播图的布局修改。搜索框,使用了绝对定位的方法进行布局的,开始宽度是按照ui图的总宽度写的,但是要适配更小分辨率,布局就会超出,侵占侧边栏的位置,这显然是不对的,所以就将宽度去掉,只是通过left和right的%数值进行了调整,通过计算,left和right的%数值,进行了修改。这样的话,在不同分辨率下,搜索框会自适应宽度大小的变化,更流畅,位置不会发生变化,不会侵占其他部分的布局。侧边栏的调整,主要是上下文字之间间距的调整,在小分辨率下,由于以前在大分辨率时设置的间距值会影响文字的显示,有的就被隐藏起来了,这自然也是不好的,就通过媒体查询对这一部分的间距在小分辨率下进行了局部修改,使得所有文字大体上还能和大分辨率时一样,都能显示完全,同时位置也差不太多,目前只能做到这些了。轮播图的调整,主要是随着分辨率的变小,图片自适应的变化快于左侧侧边栏的变化,就对图片设置了rem值,使其变化同侧边栏保持一致,对其宽度也做了相应的限制,达到同步变化的效果,要不然右侧会空出一大块来,很是难看。

收获:对布局有了更多的认识和理解,总结经验,争取在以后的项目实践中,不要再犯同样的错误和考虑不过周详的情况,在修改布局时更轻松些,更快捷、方便一些!


返回列表 返回列表
评论

    分享到