前言
H5持续火热,随着微信公众号、朋友圈、微博等途径可导入大量阅读量,博客网站移动端自适应势在必行。
下面介绍基于wordpress的网站如何实现移动化。
响应式布局
响应式网站设计(Responsive Web design
)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
优点:一套代码,能够适应不同分辨率设备访问,易于维护。
缺点:受限于同一套HTML结构,导致很多差异化布局不好进行扩展,对于小屏设备往往采用隐藏方式减少内容。
自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。
响应式网站展示:http://mediaqueri.es/、http://flatdesignluv.com/
响应式布局的实现方式为通过CSS3的媒体查询Media Queries
,针对不同分辨率做断点,使用不同的样式。