欢迎光临万书涛的个人博客

响应式网站一般怎么设计

作者:万书涛  / 日期:2020-12-09 20:59:16 /  来源:本站原创 /   浏览:
摘要
响应式网站不同于一般的电脑端和手机端分离的那种网站,由于是一个页面同时兼容pc电脑端、平板电脑端和手机端,所以其设计思路和一般性的网站有所区别,那今天万书涛就来说说响应式网站一般怎么设计。  
先谈一谈我们以前的网站设计,以前的网站我们一般是Pc端和手机端分开设计,然后pc端可以和手机端布局可以相差较大,这样的好处就是让不同设备的网站更具个性化,但带来的不好一面是网站统一性较差,而响应式网站设计不是这样。
 
响应式网站由于是一个页面同时兼容pc电脑端、平板电脑端、移动端,所以就注定了这种响应式网站的设计不能和移动端相差太大,否则通过css来调整比较难实现,比如,万书涛设计的《清雅淡淡帝国cms响应式个人博客模板》,这个就是模块化设计,每一个模块下有小板块,然后根据设备不同大小那么这些小板块就能进行不同排列,如下图一

清雅淡淡帝国cms响应式个人博客模板pc端截图

那么像图一的这种设计在手机端是如何进行响应式排列呢,这个可以看下图二,在图二中,随着设备逐渐变窄,置顶的“远离抱怨,拥抱春天散文”这篇文章通过css设计自动到上面,然后旁边的列表也按次序逐渐往下叠加,最右边的侧边列表让它不显示。

清雅淡淡帝国cms响应式个人博客模板手机端截图
 
所以,响应式的设计在设计时就要考虑到每一个模块在设备缩放时是否能够找到自己的位置,能否通过css来实现,如果实现不了,即使做的再精美,也要放弃,更多关于响应式的知识可以看这篇文章:《自己如何制作响应式网站》。
 
总之,响应式网站的设计要遵循的一个原则是“模块化”开发,只有这样,才能在设备缩放时让各个模块位置变换起来更灵活,比较忌讳的是那种一个模块下包含多种不同版设设计,这种设计导致这个模块下的板式耦合太厉害,在设备缩放时不能够进行分离变换位置,导致响应式设计失败,更多响应式设计案例可以看万书涛设计的《个人博客模板》,里面的网站都是响应式设计。
 
好的,以上就是响应式网站设计的方法,希望对大家有用。
 
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wzjszs/188.html
如需转载,须以文字形式注明本文地址,否则禁止转载