响应式WEB页面开发实践
转自：https://github.com/markyun/My-blog/issues/27
最近得到一个新任务单，让我用一套页面适应所有主流终端（Android、iPhone、iPad、PC），而且是一套页面写。 我得到任何的第一感觉就是用2套页面吧；PC和iPad一套，手机一套。才好实现吧！
但最后要求只用一套完成。虽然给开发经理说了2套页面的优势。没有办法，谁让我们还不是决策层呢， 硬着头皮开始做。原来也没有移动端开发的经验，我也只有慢慢摸索，从头做起。简要记录一下开发过程。
需要概要是这样的：（具体需求其实还不够清晰，改动挺多 ， 只兼容IE8以上浏览器）
1、在PC上显示正常PC的布局，
有些炫酷的动效 我选用了CSS3技术为主，CSS不能实现的就用JS来完成，因为transform 这些好玩的东东可以直接使用GPU加速。比JS好多了。 尽量保证动画效果的平滑与自然。底层框架依赖于jQuery 来实现其他交互和验证功能，PC页面开发根据设计图完成，相当来说最简单。
2、在ipad上则针对ipad设备横屏竖屏进行显示优化，这个比较简单，使用 Media Queries 根据设备的max-device-width来应用不同样式。后期重构还需要根据屏幕大小和 Retina 加载适应的图片。
3、在Android、IOS上模拟webapp的UI和布局， 这块内容是最复杂的，要测很多个设备、写大堆兼容性代码、在手机自带的浏览器上保证显示效果一致。 目前这块还没有做完，由于设计图布局与PC、ipad的布局区别太大，UI、交互效果都变了。很是纠结。不断在各种尝试，能不能在做的更好一点。
当然啦，一套页面适应所有主流终端是页面代码是十分臃肿的！！！ 我借鉴了bootstrap 的响应式布局方式，用了.hidden-desktop 、.hidden-phone的隐藏元素方式，来解决相同功能的组件在PC与webapp布局位置不一样的问题。但是一些动画在普通的手机浏览器上性能非常不好，有待优化。另外因为各种尺寸不同的，让页面自适应也会让页面显示效果不能跟效果图100%一致。影响了设计。
具体的代码片段：
HTML
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-device-width: 979px)" href="assets/css/pad.css">
<link rel="stylesheet" media="screen and (max-device-width: 400px)" href="assets/css/phone.css">
</head>
CSS
/* 大屏幕开始启动了*/
@media all and (min-width: 1200px) {
.nav li{
width: 160px;
}
}
/*手机横屏到竖屏 到常规屏幕 ipad*/
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
/*手机横屏和平板竖屏幕*/
@media (min-width: 400px)and (max-width: 768px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
/* 针对iPhone5 横屏和竖屏样式 */
@media (min-device-width : 320px) and (max-device-width : 568px) {
//
}
JavaScript
移动端侧滑菜单，使用了codrops的 sidebarEffects组件。完美兼容各种浏览器。
`
function init() {
var container = document.getElementById( 'st-container' ),
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( container, 'st-menu-open' );
},
bodyClickFn = function(evt) {
if( !hasParentClass( evt.target, 'st-menu' ) ) {
resetMenu();
document.removeEventListener( eventtype, bodyClickFn );
}
};
buttons.forEach( function( el, i ) {
var effect = el.getAttribute( 'data-effect' );
el.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();
container.className = 'st-container'; // clear
classie.add( container, effect );
setTimeout( function() {
classie.add( container, 'st-menu-open' );
$("nav").eq(1).addClass('open');
}, 25 );
document.addEventListener( eventtype, bodyClickFn );
});
} );
}
init();`
PC端导航菜单，当屏幕小于指定大小后菜单竖列显示，并隐藏
$("#mobile-nav").click(function() {
$(this).toggleClass('open');
$('nav').toggleClass('open');
$('body').toggleClass('nav-open');
});
$('article').click(function() {
$('nav').removeClass('open');
$('body').removeClass('nav-open');
});
2014/8/9 14:42:07
响应式WEB页面开发实践的更多相关文章
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
- Web开发——HTML基础（HTML响应式Web设计 Bootstrap）
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
- 响应式web开发的一些文章
CSS Device Adaptation:关注 W3C 建议的 CSS 设备适配标准. “在 CSS 中使用 LESS 实现更多的功能”(作者:Uche Ogbuji,developerWorks, ...
- 响应式Web设计 – 布局
写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式Web设计基础
本文所有内容来自Responsive Web Design Fundamentals 手机.大屏手机.平板电脑.桌面电脑.游戏控制台.电视.甚至是可穿戴设备,如此多的设备也形成了多种多样的屏幕尺寸.屏 ...
随机推荐
- Linux 基本操作学习
Linux 学习 虚拟机 (Virtual Machine) 指通过软件模拟的具有完整硬件系统功能的,运行再一个完全隔离环境中的完整计算机系统 常用 Linux 命令 命令 对应英文 作用 ls li ...
- 4. react 基础 - 编写 todoList 功能
编写 TodoList 功能 react 入口 js #src/index.js import React from 'react'; import ReactDOM from 'react-dom' ...
- Java 继承（extends）、抽象类(abstract)的特点用法原理（7）
Java 中的继承 继承: java中的抽象类用法原理: /* 当多个类中出现相同功能,但是功能主体不同, 这是可以进行向上抽取.这时,只抽取功能定义,而不抽取功能主体. 抽象:看不懂. 抽象类的特 ...
- RTMP、RTSP
一.参考网址 1.RTMP.RTSP.HTTP视频协议详解(附:直播流地址.播放软件) 2.海康RTSP流转RTMP并推送至WEB端展示 3.使用FFmpeg将rtsp流摄像头视频转码为rtmp播放 ...
- 打水滴（BFS）
在一个n行m列的网格中,某些位置存在一些水滴.嘟嘟进行q次打水滴操作,每次嘟嘟在某一个网格当中添加一个水滴,当某一网格中的水滴数量超过L时,该网格中的水滴变为四个水滴,并分别向上下左右四个方向飞出,每 ...
- lvm镜像卷
镜像能够分配物理分区的多个副本,从而提高数据的可用性.当某个磁盘发生故障并且其物理分区变为不可用时,你仍然可以访问可用磁盘上的镜像数据.LVM在逻辑卷内执行镜像. 系统版本 # cat /etc/ce ...
- java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003$$ 无法通过 128 (在表空间 HRDL_CSASS 中) 扩展
问题: 在tomcat日志信息中出现:java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003 ...
- 专业程序设计part2
05tue 乘以1.0使得int*int!=0 today:缩放 和计算机图形学关联 已知:currentdataset ask for:两个方向的缩放比例.保存路径.重采样方法(necessary) ...
- postman测试
Postman接口性能测试 1.从文件中获取参数,然后点击Runner 2.勾选测试用例,配置用例次数.参数文件.返回data等 3.点击run 测试用例 4.查看测试结果 5.测试接口:https: ...
- vim下看C++代码
看C++代码, 缺少合适的编辑器,捣鼓vim. 安装Vundle, 用于插件管理 git clone https://github.com/VundleVim/Vundle.vim.git ~/.vi ...