响应式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 手机.大屏手机.平板电脑.桌面电脑.游戏控制台.电视.甚至是可穿戴设备,如此多的设备也形成了多种多样的屏幕尺寸.屏 ...
随机推荐
- Python笔记_第四篇_高阶编程_进程、线程、协程_3.进程vs线程
1.多任务的实现原理: 通常我们会设计Mater-Workder模式,Master负责分配任务,Worker负责执行任务,因此多任务环境下,通常是一个Master,多个Worker 2.多进程: 主进 ...
- 生成随机数（Random类）和获取用户输入（Scanner类）
生成指定范围内的随机数 Math.random() 生成随机数,随机数在0到1之间,类型是 double. public class randCase { public static void mai ...
- Linux ES集群服务配置说明
说明: ES官网不建议在root用户使用Elastic Server,因此ES集群配置均使用普通账户操作,新建账户 elastic. Linux版本为CentOS 7.3,ES版本为5.5.0. 一. ...
- javascript编程中极易出现的错误（个人）
2018-08-10 1,setInterval打错字写成ser 2,document.getElementById().innerHTML;HTML需要全部大写 3,在for循环中定义一个i时要记住 ...
- 对于centos的运用ssh远程连接
1,首先安装ssh服务器 $yum install openssh-server 2,记录你当前centos的ip地址 $ifconfig 3,再在windows里面安装putty 4安装完成后, 在 ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL 管理
启动及关闭 MySQL 服务器 Windows 系统下 在 Windows 系统下,打开命令窗口(cmd),进入 MySQL 安装目录的 bin 目录. 启动: cd c:/mysql/bin mys ...
- 吴裕雄--天生自然 PYTHON3开发学习：运算符
#!/usr/bin/python3 a = 21 b = 10 c = 0 c = a + b print ("1 - c 的值为:", c) c = a - b print ( ...
- Java之同步方法处理继承Thread类的线程安全问题
/** * 使用同步方法处理继承Thread类的方式中的线程安全问题 * */class Window4 extends Thread { private static int ticket = 10 ...
- git 提交部分修改的文件，以及如何撤回已经add的文件
命令 1.git status //查看修改文件状态 ,可以看到哪些add了哪些没add 注意:如果此时出现了有些文件不想添加到暂存区却添加进去了,需要撤回 git reset HEAD 全部撤销gi ...
- AFN Post请求，报错400（code:-1011）
解决方法: 声明请求的参数格式是json, post的数据格式还是传字典. 声明代码: AFHTTPSessionManager *manager = [AFHTTPSessionManager ma ...