轩枫阁

首页 / 搜索标签: 响应式

wordpress移动端自动切换主题代码

前言

H5持续火热,随着微信公众号、朋友圈、微博等途径可导入大量阅读量,博客网站移动端自适应势在必行。

下面介绍基于wordpress的网站如何实现移动化。

响应式布局

响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

优点:一套代码,能够适应不同分辨率设备访问,易于维护。

缺点:受限于同一套HTML结构,导致很多差异化布局不好进行扩展,对于小屏设备往往采用隐藏方式减少内容。

自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。

响应式网站展示:http://mediaqueri.es/http://flatdesignluv.com/

响应式布局的实现方式为通过CSS3的媒体查询Media Queries,针对不同分辨率做断点,使用不同的样式。

常用断点查询:屏幕尺寸大全UI设计规范 查看全文

2016/08 20  周六

响应式网页设计- 移动、ipad端开发总结

前言

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。

1、特殊的meta 标签

现在我们用的智能手机(iOS,Android)的浏览器都是基于webkit内核,由于webkit的浏览器对于html5的支持比较好,所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度(如像素值)或者缩放比例如2.0(设备实际尺寸的两倍)。 查看全文

2014/11 05  周三

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]