子曰设计出品
扫描关注子曰微信公众账号

扫一扫微信二维码

子曰广告教你如何布局响应式桌面端+移动端 企业

子曰品牌2015-09-18行业动态

布局响应

现在的响应式布局一般要么是桌面优先(从桌面端开始设计,然后开始逐步向下根据桌面端的开发移动端),还有一种是移动端优先(从移动端开始设计,向上开发出桌面端)
不论我们怎么做都需要对布局做一些调整,但这些调整和页面的整体不会发生冲突。

接下来看下我们在页面布局上做了那些调整

电脑端显示
这块布局就不一一说了大家看下demo可以自己模仿出来

演示demo

 

Apple iPad
这块这里也没有改变什么,无非是改变了一些块的大小和删掉了hover效果,hover效果在移动端上显示非常糟糕。

@media (max-width: 1200px){ .project-overlay{ display:none;} }这里的尺寸就根据Bootstrap的来规定了,然后把hover的效果隐藏

移动手机端
头部导航栏是用stickUp插件做的 可以去Bootstrap下载,滚动轮播是Bootstrap。(颜色是因为gif的原因)

 

然后一点一点根据移动端的样子进行更改。@media

页面展示

总结

响应式桌面端+移动端 企业网站框架布局一般都是从桌面端向下制作移动端。桌面端的制作完成后根据布局一点一点把移动端的页面修改出来。

响应式的内容到这里也就结束了,这篇也是在很忙的时候草草完成的,最近也有很多事,因为公司需要就一直在忙房地产的现场布置,还有就是自己公司网站在整理代码和修改样式(之前经历过超多任,一直没有整理,乱的出奇)还有就是APP上的HTML5页面也在制作当中。

下一篇还是会将移动端的,很多页面就是单独,下次会将一个框架模式的,还有一个是投票的页面。

PS:这次也把源文件给大家这个是我修改过的,供大家学习

 
文章关键词